Display a variety of body background images depending on the user's selection

Is it possible to change the background of the page when an option is selected from a dropdown menu?

Additionally, can this be achieved with a smooth fade in and fade out animation?

Here is a code example on CodePen.

    
            body {
                background-image: url("http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg");
                background-attachment: fixed;
                background-position: 50% 50%;
                background-size: cover;
            }
        
    
            <div class="container">
            
            <br><br><br>
            <select class="form-control select">
                <option> Show London Background Picture</option>
                <option> Show Paris Background Picture</option>
                <option> Show Italy Background Picture</option>
            
            </select>
            
            
            <br>
            <div class="jumbotron">
            IF LONDON SELECTED THEN BACKGROUND: <br>http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg<br><br>
            IF PARIS SELECTED THEN BACKGROUND: <br>    
            http://travelnoire.com/wp-content/uploads/2013/12/eiffel-tower-paris-2.jpg<br><br>
            IF ITALY SELECTED THEN BACKGROUND: <br>
                https://upload.wikimedia.org/wikipedia/commons/5/53/Colosseum_in_Rome,_Italy_-_April_2007.jpg
            </div>
            </div>

jqueryhtmlcss

Answer №1

To modify the background image of your website based on a selection made in a dropdown menu, you can use a JavaScript function triggered by the 'onchange' event:

$('#ID_OF_YOUR_SELECT').change(function() {
    $('body').css('background-image', 'url("' + this.value + '")');
});

You can view an updated version of your code implementation on Codepen: http://codepen.io/anon/pen/yNvapW

Answer №2

Expanding on Asgaros' response, I have incorporated the fade in and out functionality.

Check out the result: http://codepen.io/anon/pen/wayzyx. By simply adding a few lines of CSS to the body's style, the effect was achieved.

-webkit-transition: background 0.8s linear;
-moz-transition: background 0.8s linear;
-o-transition: background 0.8s linear;
transition: background 0.8s linear;

Answer №3

This code snippet modifies the class of body and creates a fading effect on the background when the value of select is changed.

// Set the default background based on select value
$(document).ready(
  function() { changeBackground.call($('.form-control')); }
);

// Update background on select value change
$('.form-control').change(function() {
  changeBackground.call($(this));
});

function changeBackground() {
  var $body = $('body');
  var values = "";
  this.children('option').each(function() {
    values += $(this)[0].value + " ";
  });
  var selectedValue = this[0].value;
  
  $body.removeClass(values.replace(selectedValue, ""));
  $body.addClass(selectedValue);
};
body {
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-transition: background-image 500ms ease;
    transition: background-image 500ms ease;
}
body.london {
    background-image: url("http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg");
}
body.paris {
    background-image: url("https://images.indiegogo.com/file_attachments/620900/files/20140602122905-paris.jpg?1401737345");
}
body.italy {
    background-image: url("http://www.liberty-int.com/Public/Italy-Signature-Slide5-Venice.jpg");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
  <select class="form-control select">
    <option value="london">Show London Background Picture</option>
    <option value="paris">Show Paris Background Picture</option>
    <option value="italy">Show Italy Background Picture</option>

  </select>


  <br>
  <div class="jumbotron">
IF LONDON SELECTED THEN BACKGROUND: <br>http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg<br><br>
IF PARIS SELECTED THEN BACKGROUND: <br>    
http://travelnoire.com/wp-content/uploads/2013/12/eiffel-tower-paris-2.jpg<br><br>
IF ITALY SELECTED THEN BACKGROUND: <br>
    https://upload.wikimedia.org/wikipedia/commons/5/53/Colosseum_in_Rome,_Italy_-_April_2007.jpg
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a visually appealing Django filter form with custom styling in HTML

Currently, this is how my django filter form appears: Below is the html code I am using: <form action="" method="get" class="form-inline"> {{myfilter.form|bootstrap}} <button class="btn btn-primary&q ...

pythonhtmlcssdjangoforms

Prevent selection of end dates in jQuery Date Picker until a start date has been chosen by the user

I am currently working with a date picker that has specific constraints The end date should not be earlier than the start date - Complete My current issue is that the user should not be able to select an end date without selecting a start date This is m ...

jquerydatepicker

Issue encountered while attempting to compress tailwindcss

I attempted to reduce the size of my tailwindCSS by creating a script in my package.json: "tw:prod":"NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./public/css/tailwind.css", However, I encountered the ...

cssjsonnpmtailwind-css

Issues with image sizing on mobile devices

After finalizing my header design, I encountered an issue with the mobile version of the website. The images in the header are not responsive and do not adapt well to different screen sizes. I need assistance converting the header design into functional co ...

htmlcss

How to dynamically assign width to elements in a v-for loop in Vue.JS

I am working with HTML code that looks like this: <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat"> <div class="stats"> { ...

cssvue.jsstyleswidth

li rel=identifier

Can someone assist with choosing rel="28700" in order to update the text within the <li> tag? <li id="pen_li_8" rel="28700"><span class="linkselectValue">Text to be changed</span></li> I have attempted the obvious method: $ ...

javascriptjqueryjquery-selectors

AJAX for efficient storage of various input fields

Currently, I am working on saving input field values dynamically using AJAX in my Laravel framework applications. The issue lies in the fact that all input field names are identical in each table row, causing only the value from the first row to be submitt ...

phpjqueryajaxlaravel

Exploring front-end AJAX functionality within a WordPress plugin

As a newcomer to WordPress development, I have been working on writing an AJAX request within a WordPress plugin. To test this functionality, I initially sent the request to an external non-WP server where it worked without any issues. Following the guidel ...

javascriptphpjqueryajaxwordpress

Steps for submitting a form through an ajax callback

After delving into the world of Ajax, I encountered a problem that has me stumped. Initially, I am requesting data to populate a table, but I'm unsure how to tackle the issue. load_data(); function load_data(page) { $.ajax({ ...

javascriptjqueryajax

Is there a way to prevent a tag from being clickable on the entire row, except for the actual link itself?

My question is why, when using the a tag, the entire row on the right becomes clickable as well? Despite there being no link, the area at the back of the row on the right side is clickable. Is there any way to remove this clickable area? <a id="ba ...

htmlcss

Is there a way to display a bootstrap modal when the page is refreshed?

Is there a way to automatically display a Bootstrap modal box without the need for clicking anywhere? I want the modal to appear every time the page is refreshed, rather than requiring a click event. Can anyone provide guidance on achieving this? < ...

javascripthtmljquerycsstwitter-bootstrap

Extracting information from console output and displaying it in a table with angular2

https://i.stack.imgur.com/BMt6J.pngI am facing an issue with retrieving data from the console output and populating it into an HTML table. Can someone please assist me with this? Here is the HTML Code: <table class="table"> <tr> <t ...

htmlangulartypescript

Exploring the Power of jQuery Text Search

I am working with HTML code. <body> <span> <font="color"> adfadf 23423423423 ORDER_NUMBER: </font> </span> <span>M123456JK98766</span> </body> The s ...

jquerysearchtext

Mastering responsive layout design in Nextjs using Tailwind CSS

I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS. My goal is to ensure that the image remains responsive. <div className="block"> < ...

cssnext.jstailwind-cssnext-images

Switching Tabs When a Button is Clicked

I am currently using a guide from the link provided to learn how to create tabs: http://www.w3schools.com/howto/howto_js_tabs.asp. function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClass ...

javascripthtml

Utilizing jQueryUI dialog along with gridview and updatepanel for a seamless user

Currently, I am utilizing jQuery to transform a column of hyperlinks within a gridview into UI dialogs. The gridview is housed in an updatepanel. When I click on one of the dialog's buttons, I trigger a __dopostback on the updatepanel to refresh the ...

asp.netjqueryjquery-uiupdatepanel

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

My local WAMP server hosts a web application with self-signed SSL enabled, resulting in the following app URL: https://myipaddress:port/demoapp/index.html However, when I send this URL via WeChat chat and click on it, only a blank page is displayed. Stra ...

htmlweb-applicationsgoogle-chrome-extensiongoogle-chrome-devtoolswechat

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

Controlling the Alignment of HTML Div Elements

I'm struggling to align some of these divs, especially centering them. I want the page to closely resemble this image: Here are the specific requirements: 1) The header text should be centered vertically and placed in a separate div with a black back ...

csshtmlalignmentvertical-alignment

What could be the reason for the "category empty" message appearing at the first index after clicking on the add

When I click on the add products button, why is the category name empty at the first index? 1. The text starts from index 2 of the category column. 2. When I change the value from the dropdown, it first displays the previous value in the category column an ...

javascriptphpjqueryajaxlaravel