Avatar of lapucca
lapucca
 asked on

I need to have a background color extend to entire width of monitor in bootstrap

However, the rest of the body of this page only fits in col-md-12, first section of a blcok of text and an image needs to be on top of this grey shade background of 320px height.  Need help laying this out.

Please see the layout in the attached tile.  The grey is the part that need to extend to screen width, col-lg-12.  The blue parts are contents.

thank you.
CSSHTML

Avatar of undefined
Last Comment
lapucca

8/22/2022 - Mon
Tom Beck

The attached file?
lapucca

ASKER
Sorry about it.  Here it is.
layout.png
Tom Beck

Just create a 320px tall by a few pixels wide background image for the gray and apply it to the body with repeat-x.

body { background: #ffffff url(pathToGrayBackground.png) repeat-x top left }
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
lapucca

ASKER
The grey background doesn't start at the top of the body.  There is a logo above it that is about 88px.  How do I do this?  Also, what does that top left do?  

Thank you.
Tom Beck

left top (I had it backwards) is the background position. It just means set the upper left corner of the background image to the upper left corner of the container, which in this case is the body.

When you create your background image you can leave 88px above the 320px tall gray area so you have a 408px tall image.

Or leave the background image at 320px and position it 88px down from the top.

body { background: #ffffff url(pathToGrayBackground.png) repeat-x 0 88px }
lapucca

ASKER
But if I'm putting in 88px top, would it get adjusted automatically in the med, sm and xs boostrap?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
lapucca

ASKER
Thank you.