Change header background WordPress
- SOLVED
This is probably an easy one!
johannessendesign.no
password: passworddaisy
The theme I'm using has a header pattern with a vignette wrapper. I want to use a background image instead of both.
Take a look at both the main page and the other pages, 'cause the header appears different on other pages.
Questions:
- How should the code be altered?
- What do I do to make the bg image I want to use stretch across the whole screen? Should I make the image 1920 px wide? Or how should I do this?
body #header_wrapper
{
background: #212C35 url('../images/header_bg.png') no-repeat top center;
padding: 20px 0 0 0;
height: 236px;
}
body #header_pattern
{
background: transparent url('../images/skins/right_strip_pattern.png') repeat;
padding: 20px 0 0 0;
height: 280px;
margin-top: -298px;
}
body.home #header_wrapper
{
background: #212C35 url('../images/header_bg.png') no-repeat top center;
padding: 20px 0 0 0;
height: 550px;
}
body.home #header_pattern
{
background: transparent url('../images/skins/right_strip_pattern.png') repeat;
padding: 20px 0 0 0;
height: 550px;
margin-top: -120px;
}
Answers (4)
Plugarized answers:
Download the following file and replace it with your old screen.css and remember to make a backup first.
File: http://latinunit.net/screen.css
Here are some screenshots
http://latinunit.net/home_johannes.jpg
http://latinunit.net/single_johaness.jpg
I would also suggest lowering the quality of that wood header as its near 700kb and that will give you loading speed issues. If you want help with that please PM me i'll do it for free
levikristoffer comments:
Thanks to all contributors for excellent help!
What solved everything for me was what LatinUnit helped with.
LatinUnit: The quality is lowered. The file is now 171 kb. What you did in the code helped me change the footer as well. So thank you very much! I'll remember to contact you if I ever have any wpquestions again!
Plugarized comments:
You are very welcome
Francisco Javier Carazo Gil answers:
Hi,
Clear this one in your CSS (comment for preventing problems)
.page_caption
{
width: 100%;
margin: 0;
background: transparent url('../images/000_25.png') repeat; <--- THIS ONE
height: 125px;
padding-top: 30px;
}
This is in screen.css.
If you prefer direct help send me PM.
Arnav Joy answers:
which of the bg image you want to use in all pages.
homepage bg or innper page bg?
levikristoffer comments:
I want this picture
http://johannessendesign.no/wp-content/themes/Lotus/images/bg.png
instead of the header pattern background.
Arnav Joy comments:
i am not sure but i think there is a setting in the admin panel to change the header bg , please check it or provide me access to the site via pm
Budi Kurniawan answers:
try this :
body #header_wrapper
{
background: #212C35 url('../images/header_bg.png') repeat-x top center;
padding: 20px 0 0 0;
height: 236px;
}
body #header_pattern
{
background: url('../images/skins/right_strip_pattern.png') repeat;
padding: 20px 0 0 0;
height: 280px;
margin-top: -298px;
}
body.home #header_wrapper
{
background: #212C35 url('../images/header_bg.png') repeat-x top center;
padding: 20px 0 0 0;
height: 550px;
}
body.home #header_pattern
{
background: url('../images/skins/right_strip_pattern.png') repeat;
padding: 20px 0 0 0;
height: 550px;
margin-top: -120px;
}