WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I'm brand new to CSS. I'm giving it a shot to learn : ) I'm using Twenty Twelve theme. I'd like to change my header to a full page width with no margin at the top. Would someone be able to assist me with this?
Kirsten
The blog I need help with is kirstenjoyawake.com.
You can upload and use a header image of any size, up to 2000px wide in twenty twelve as it supports the flexible header feature.
http://en.support.wordpress.com/themes/custom-header-image/#flexible-headers
You can upload and insert one following the instructions in the above support document. I would do this and see how things look. If you have problems, or want to make adjustments after uploading the image, let us know however, we volunteers cannot see sites that are set to private. You will have to set it to public for a short time so that we would be able to help you with your adjustments. If you cannot set it to public, let us know and we can tag this thread for staff attention and then they can help you with it since they can see your site.
Thanks so much for your response! I changed my privacy settings so you can view my blog. My apologies : ) I have an image uploaded for the banner that is 1987 x 249 pix. It shows the whole image without cropping, however, it stills gets crammed into the 960 pixel space that the template allows for. I'd like the image to span the width of the screen, not be crammed into the little space allowed by the template. Any advice for this?
Hmmm, this could be tricky. Let me work on it. I've got some errands to run and will look into it further when I get back.
I'd like the image to span the width of the screen, not be crammed into the little space allowed by the template. Any advice for this?
Here are a couple very basic CSS snippets you can add as a test and that will also help us figure out your end goal.
Do you mean you want your custom image to be part of the background behind the white container that holds the content, like this?
kirstenjoyawake
designsimplybody {
background: url("http://kirstenjoyawake.files.wordpress.com/2013/04/cropped-kirsten-joy-awake_header5.jpg") top center repeat-x;
}Or do you mean you want to try to setup a header image that fits snug to the main content container more like this?
body .site {
padding-left: 0;
padding-right: 0;
}
.header-image {
margin-top: 0;
}Those aren't solutions, but they may be enough to get you going in the right direction.
It does sound a little like you're trying some very advanced CSS updates for this theme. :)
Yes, this worked! Thank you so much for your help! I used the first snippet to make the image part of the background and then, I set the site width to 100%. I'm not sure how to remove the white space above the background image though. Would you have any advise on this?
Did you try removing the margin from the header image area like this?
.header-image {
margin-top: 0;
}That did it. Thank you so much for your help. I really appreciate it!
: )
Cheers :)
This topic has been closed to new replies.
