Right align body and keep left aligned background image

  • Unknown's avatar
    laurahforest · Member ·

    Is there any way to have a background image left aligned and for the header and body to flow right over onto the right hand side of the page?

    I’m not sure my language is very clear but basically I want the grey header and white to run across the rest of the screen, and have a tiled scrolling image on the left as a background.

    Not sure how to search the css forums for this question.

    Thanks!

    The blog I need help with is chefandphotographer.wordpress.com.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    This *might* be close, give it a try:

    @media screen and (min-width: 1384px) {
.custom-background #main-header,
	body > .frame {
		margin: 0 0 0 auto;
		padding-right: 300px;
	}
}

    Note that I put it inside a media query so it would not affect the responsive design for smaller screen sizes like iPads and iPhones.

    I picked the top number ,1334, by adding 1084 and the “padding-right” value to get rid of the extra right-hand side spacing when the display size is small enough. You can adjust that number as needed.

    Try experimenting with that example and adjusting both numbers until you find a good fit.

  • The topic ‘Right align body and keep left aligned background image’ is closed to new replies.