Title: Change header Background Image Last modified: August 22, 2016 --- # Change header Background Image * Resolved [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/) * I would like to change the header so that it has a background image instead of no image like it has in my link below . The stuff I want to change is where it says Fantastic Site * [http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/](http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/) * I like this theme but would like to edit this feature .I am using the free version of the theme yes. Viewing 15 replies - 1 through 15 (of 53 total) 1 [2](https://wordpress.org/support/topic/change-header-background-image/page/2/?output_format=md) [3](https://wordpress.org/support/topic/change-header-background-image/page/3/?output_format=md) [4](https://wordpress.org/support/topic/change-header-background-image/page/4/?output_format=md) [→](https://wordpress.org/support/topic/change-header-background-image/page/2/?output_format=md) * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566957) * Hey there blueberry1977, * This can be done by by adding some custom CSS. The easiest way to do that, if your theme doesn’t already have custom CSS tab, would be to add it in your site using the following plugin * [http://wordpress.org/plugins/simple-custom-css](http://wordpress.org/plugins/simple-custom-css) * Once the plugin is installed and activated you can add this code to Appearance >> Custom CSS: * ``` .header4 { background-image: url(your_image_URL); } ``` * Replace your_image_URL with the actual URL of the image you would like to use. * Best regards, Bojan * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566960) * yes this is a great theme i have tried a lot of differnt ones now . So I am using the free version of it now. And is it still possible to get this custom header picture still without having to buy it or?I am confused on how their rules are on these isues.I only want the same header on all my pages. Using this url for test purposes when i have a new theme I want to try.yes i allready have the plugin called simple css.Yes will try this code sniplet and get back to you later. * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566961) * here is what i have in the header part of my css file on this great theme currently: * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566963) * /*HEADER*/ .header{width:100%; float:left;position:relative; margin-bottom:10px;}. header a{ color:#333;} .header .head_soc{ position:absolute;right: 0; bottom:- 24px;z-index: 9999;background: url(images/submenu.png) repeat; cursor:pointer;}. header .center{ } * /*Headers4*/ .header4{width:100%; background:#333; height:auto; float:left;}. header4 a{ color:#fff;} .header4 .center{ position:relative;} .header4 .logoimga{ display:block; float:left;} * .header4 #topmenu{ margin-top:0;} .header4 #topmenu ul li{padding: 0 20px 0 20px; padding-top:34px; padding-bottom:31px;border-bottom: 3px solid transparent; margin-left: -4px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition: all 0.2s ease-out;} .header4 #topmenu ul li ul li{ padding:0; margin-left:0; border-bottom:none; line-height:normal!important; height:auto!important;} .header4# topmenu ul li ul{top: 90px;margin-left: -80px; margin-top:0;} .header4 #topmenu ul li ul li ul{ margin-top:-90px; margin-left:0;} .header4 .current-menu-item{ background:rgba(0, 0, 0, 0.1);} .header4 #topmenu ul li:hover{background:rgba( 0, 0, 0, 0.03);border-bottom: 3px solid #2dcb73;} .header4 #topmenu ul .zn_parent_menu: hover{border-bottom: 3px solid transparent!important;} .header4 #topmenu .sub- menu{border-top: 3px solid #2dcb73;} .header4 #topmenu ul li:hover ul li{ border- bottom:none;} * .bigmenu{text-align: center; width: 100%;} body .header4 .bigmenu ul li:hover{ background:none!important;} * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566969) * have now tested it and it seems the code checks out using the code checker online but when u see u can not see any changes? * here is what i added in the simple css plugin * .header4 { background-image: url([http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/oc-1024×640.jpg](http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/oc-1024×640.jpg));} * I just uploaded a new image so the path to it should be ok too. so why is it not working? * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566976) * yes now i have reuploaded the image and it was because of that and now it works good. * So what is it with the design ? I mean when I go to my Test page I get this wird green background colored Square indicating the tittle again of the page which is allready in the menu. * How do you get rid of this green Square ? I like to go directly to the content as i did running the 2013 default theme … * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566981) * [http://undertheweb.info/wordpress-4.0.1-en_CA/wordpress/](http://undertheweb.info/wordpress-4.0.1-en_CA/wordpress/) * here is a link to my blog site that has 2013 themes * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566982) * Hey there blueberry1977, * > So I am using the free version of it now. And is it still possible to get this > custom header picture still without having to buy it * You can use free themes and insert custom headers or for that matter any custom CSS without having to buy the theme. * > How do you get rid of this green Square ? * This can be done with some custom CSS, please add this code like I explained in my previous comment if you wish to remove it completely: * ``` .page_tt { display: none; } ``` * Best regards, Bojan * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5566987) * and now its gone yes thanks………. * But there is still something left this site has a white background color and I wanted all my content to have the same background image and it also worked beside some small areas. Will give u index so u can see the total css i use now maybe u edit in it or add something that will make all the white areas of the site to be gone. Except those reply to me forms though heads up for those . So those are the only exception. Here is my current css * body { background-image: url(“[http://undernettet.info/wordpress-4.0.1/wordpress/wp-content/uploads/2014/12/sunset1-1024×640.jpg”](http://undernettet.info/wordpress-4.0.1/wordpress/wp-content/uploads/2014/12/sunset1-1024×640.jpg”);); no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background- size: cover; background-size: cover; } .header4 { background-image: url([http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/oc-1024×640.jpg](http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/oc-1024×640.jpg));}# content, .post-navigation { background-image: url(“[http://undernettet.info/wordpress-4.0.1/wordpress/wp-content/uploads/2014/12/1920×1080-1024×576.jpg”](http://undernettet.info/wordpress-4.0.1/wordpress/wp-content/uploads/2014/12/1920×1080-1024×576.jpg”);); no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background- size: cover; background-size: cover; } .page_tt { display: none; } * within my custom css plugin * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5567012) * what shall i add or remove from my css to make it like that? * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5567058) * Hey there blueberry1977, * If you are referring to this white line above the page content [http://screencast.com/t/kG5U4h9Ht](http://screencast.com/t/kG5U4h9Ht), it can be removed with some custom CSS. Add this code like I explained in one of my previous posts: * ``` .page #content { margin-top: 0; } ``` * This will remove the white line. * Best regards, Bojan * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5567059) * no it id not work u can clearly see the white area is still there in both my subpages one of them is called test and the other one is called sample page. * here is a link for it [http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/?page_id=2](http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/?page_id=2) * u can see that its still white in background color. * And if u go here u can see that is all the same background color. * also on my recent post and comments and all subpages too. * ecept from the forms areas where people can ask me questions. * [http://undernettet.info/wordpress-4.0.1/wordpress/?page_id=122](http://undernettet.info/wordpress-4.0.1/wordpress/?page_id=122) so yes there is still something missing in the css maybe something i have to delete or to edit. * here is what i added so far in my current css plugin By the way I see 2 css codes about the content area because i added another one maybe that could be wrong pls check it out here.I also got that image slider working very nice yesterday too yes and put some other test in those areas where it just said ipum before….. * body { background-image: url(“[http://undernettet.info/wordpress-4.0.1/wordpress/wp-content/uploads/2014/12/sunset1-1024×640.jpg”](http://undernettet.info/wordpress-4.0.1/wordpress/wp-content/uploads/2014/12/sunset1-1024×640.jpg”);); background-color: #cccccc; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .header4 { background- image: url([http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/oc-1024×640.jpg](http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/oc-1024×640.jpg));}# content, .post-navigation { background-image: url(“[http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/1920×1080-1024×576.jpg”](http://great.16mb.com/wordpress-4.0.1-en_CA/wordpress/wp-content/uploads/2014/12/1920×1080-1024×576.jpg”););- webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .page_tt { display: none; } .site-footer .widget_recent_comments{ background-color: orange; } .site-footer .sidebar-container { background-color: orange; } .page #content { margin-top: 0; } * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5567062) * In all page content I want same background picture of color but not white no………… that is the isue now when u see it compared to my 2013 themed other site. I want to use same bacground picture as I use the picture of the blueish sky and clouds blurry picture that is the one i want to use and if i put that on all site it will not be white in content area. * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5567064) * Hey there blueberry1977, * You can remove the white background in order for that image to be displayed by adding this CSS code: * ``` .single_post { background: none; } ``` * This will remove the white background of the content part and allow your image to be displayed 🙂 * Best regards, Bojan * Thread Starter [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * (@blueberry1977) * [11 years, 5 months ago](https://wordpress.org/support/topic/change-header-background-image/#post-5567068) * yes u done it again thank you. I think the front page is very great now. I want it to be only with the image slider and do not want all the other stuff. I of course want the menu too.But not all those other stuff like the recent comments and the welcome message and the 3 boxes with text in them. * So pls tell me how to delete these ? And then it should look almost same as the other site yes. Viewing 15 replies - 1 through 15 (of 53 total) 1 [2](https://wordpress.org/support/topic/change-header-background-image/page/2/?output_format=md) [3](https://wordpress.org/support/topic/change-header-background-image/page/3/?output_format=md) [4](https://wordpress.org/support/topic/change-header-background-image/page/4/?output_format=md) [→](https://wordpress.org/support/topic/change-header-background-image/page/2/?output_format=md) The topic ‘Change header Background Image’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/asteria-lite/1.0.3/screenshot. png) * Asteria Lite * [Support Threads](https://wordpress.org/support/theme/asteria-lite/) * [Active Topics](https://wordpress.org/support/theme/asteria-lite/active/) * [Unresolved Topics](https://wordpress.org/support/theme/asteria-lite/unresolved/) * [Reviews](https://wordpress.org/support/theme/asteria-lite/reviews/) * 53 replies * 3 participants * Last reply from: [blueberry1977](https://wordpress.org/support/users/blueberry1977/) * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/change-header-background-image/page/4/#post-5567178) * Status: resolved