Title: CSS Customization: Changing the background Last modified: December 15, 2020 --- # CSS Customization: Changing the background * [sagibinder](https://wordpress.org/support/users/sagibinder/) * (@sagibinder) * [5 years, 5 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/) * Hello I build an WP website [link redacted] with Bold Photography By Catch Theme. I edited the CSS Customization the following * ``` #page, .site-content-contain, #primary-search-wrapper .search-container, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float, .audioman-mejs-container.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .woocommerce-account .woocommerce-MyAccount-navigation a { background-color:#FFFFFF !important; } ``` * I would like to set an image in the background of few pages by using elemenetor plugin but I am not able because everything is white (#FFFFFF). What should be change in the CSS customization code, If I would like to set the background of the header (logo + menu) in white and and rest nothing in order to change it through elementor plugin in every page. I made a mockup using a photoshop [mockup](https://ibb.co/s179DVs) * Can you please advise regarding the code i need to add/delete ? - This topic was modified 5 years, 5 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). - This topic was modified 5 years, 5 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-customization-changing-the-background%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 6 replies - 1 through 6 (of 6 total) * [Vlad](https://wordpress.org/support/users/vladytimy/) * (@vladytimy) * [5 years, 5 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-13793170) * Hi, [@sagibinder](https://wordpress.org/support/users/sagibinder/) * Try adding this in Dashboard – Appereance – Customize – Additional CSS in the [Customizer](https://wordpress.org/support/article/appearance-customize-screen/) * If you want the background of the page to be transparent, so you can set the background image: * ``` #page {background-color:transparent !important;} header { background-color: #ffffff !important;} ``` * At least on Contact page, that leaves you with a problem: the `.elementor-column- wrap` has also a transparent background, and you want it white. So the full code would be: * ``` #page {background-color:transparent !important;} header { background-color: #ffffff !important;} .elementor-column-wrap {background-color: #ffffff !important;} ``` * You can learn how to use the [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools/) or [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) to help you see and test changes to your CSS. * Hope this helps, Kind regards! - This reply was modified 5 years, 5 months ago by [Vlad](https://wordpress.org/support/users/vladytimy/). Reason: CSS updated: header has a white header now * [Vlad](https://wordpress.org/support/users/vladytimy/) * (@vladytimy) * [5 years, 5 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-13793203) * PS: I updated the code above! I initially forgot about wanting the header with a white background 😀 * Thread Starter [sagibinder](https://wordpress.org/support/users/sagibinder/) * (@sagibinder) * [5 years, 5 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-13796960) * Hi Vlad Thanks for the help but the solution didn’t work. In the main page I would like to remain the same, just to edit few specific pages such as: About, Contact us. * I created a [mockup using photo shop](https://ibb.co/s179DVs). the final result should be something like [this ](https://ibb.co/s179DVs) in the Contact us page. After adding your code the background is still white, In addition can you please advise what i should add to code, I would like to set the Logo in the middle of the page and the menu will be below the logo in the middle as well, something like [Dior](https://www.dior.com/en_int) website * This is the full CCS code I have edit so far. * ``` #page, .site-content-contain, #primary-search-wrapper .search-container, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float, .audioman-mejs-container.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .woocommerce-account .woocommerce-MyAccount-navigation a { background-color:#FFFFFF !important; } .menu-inside-wrapper { background: white; } #header-links { background: transparent!important; } .storefront-primary-navigation { background-color: transparent; !important; } .storefront-primary-navigation, .main-navigation ul.menu ul.sub-menu{ background-color:transparent; } #header .primary-navigation .toggle-mobile-menu{ color: transparent; } .absolute-header .site-title a, .absolute-header .menu-toggle { color: #000; } @media screen and (min-width: 75em) .navigation-classic.absolute-header .main-navigation a { color: #000; } .main-navigation ul :hover > a, .main-navigation ul .focus > a { background-color: #e2e2e2 !important; } .menu-toggle, .menu-toggle:hover, .menu-toggle:focus, .menu-toggle.selected { color:#000000 !important; } .hm-nav-container { background-color: transparent; } p, h1, h2, h3, h4, h5, h6, .entry-title a, h1.entry-title, .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title, .main-navigation a { color: #000000; } footer{ background-color: black; } .tnp-widget { color: white; !important; } .footer-widget-1 {width: 100%; max-width: 450px} .footer-widget-2 {width: 100%; max-width: 500px} .footer-widget-3 {width: 100%; max-width: 400px} .oneRowForm { text-align: center; } .oneRowForm > div input:not([type="submit"]), .oneRowForm textarea { border: none; border-bottom: 1px solid #545454 !important; background: none !important; outline: none; border-radius: 0; margin-bottom: 20px; width: 100%; max-width: 400px; text-indent: 0; font-weight: 400; } .oneRowForm textarea { resize: none; height: 46px; padding-right: 7px; transition: height .4s; } .oneRowForm textarea:active, .oneRowForm textarea:focus { height: 100px; } .oneRowForm input[type="submit"] { background: #000; width: 100px; height: 30px; line-height: 30px; border-radius: 0; outline: none; -webkit-transition: all .3s; transition: all .3s; text-indent: 0; text-shadow: none; color: white; padding: 0; } .oneRowForm .my_submit_button:hover, .oneRowForm .my_submit_button:focus, .oneRowForm .my_submit_button:active { outline: none; background: #942662 !important; } .oneRowForm .ajax-loader { position: absolute; left: auto; right: auto; } ``` - This reply was modified 5 years, 5 months ago by [sagibinder](https://wordpress.org/support/users/sagibinder/). * [Vlad](https://wordpress.org/support/users/vladytimy/) * (@vladytimy) * [5 years, 5 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-13797053) * I am sorry that didn’t help. * I recommend asking at [https://wordpress.org/support/theme/bold-photography/](https://wordpress.org/support/theme/bold-photography/) so the theme’s developers and support community can help you with this. * Kind regards! * [brandtki](https://wordpress.org/support/users/brandtki/) * (@brandtki) * [5 years, 2 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-14289937) * Did you ever get resolved? I am trying to change menu font color as well? * [Vlad](https://wordpress.org/support/users/vladytimy/) * (@vladytimy) * [5 years, 2 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-14289949) * Hi, [@brandtki](https://wordpress.org/support/users/brandtki/) * Per [Forum Guidelines](https://wordpress.org/support/forum-user-guide/faq/#i-have-the-same-problem-can-i-just-reply-to-someone-elses-post-with-me-too) please open your own topic about your issue. Even if your issue might be similar, if things are not 100% identical, it might have a different solution that works for you. * If you’re using Bold Photography theme as well, please open a topic at the specific theme forum. * Kind regards! Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘CSS Customization: Changing the background’ is closed to new replies. ## Tags * [additional css](https://wordpress.org/support/topic-tag/additional-css/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 6 replies * 3 participants * Last reply from: [Vlad](https://wordpress.org/support/users/vladytimy/) * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/css-customization-changing-the-background/#post-14289949) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics