Solved

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

Posted on 2014-11-07
8
160 Views
Last Modified: 2014-11-13
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.
0
Comment
Question by:lapucca
  • 4
  • 4
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40430134
The attached file?
0
 

Author Comment

by:lapucca
ID: 40430866
Sorry about it.  Here it is.
layout.png
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40431912
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 }
0
 

Author Comment

by:lapucca
ID: 40433795
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.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 40434184
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 }
0
 

Author Comment

by:lapucca
ID: 40435330
But if I'm putting in 88px top, would it get adjusted automatically in the med, sm and xs boostrap?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40435694
No. Anytime you use a fixed height instead of a percentage of height you break the responsiveness. My suggestions were based on the information provided, 320px high gray area, 88px high logo.

Is the logo area currently responsive to changes in screen size? If so, how? If it's done using a percentage if screen height then use the same percentage for the distance from the top to start the gray background.

Is the gray area currently responsive to changes in screen size? If so, how? If it's done using a percentage if screen height then use the same percentage for the height of the gray background.

Example:

body { background: #ffffff url(pathToGrayBackground.png) repeat-x 0 10% / 100% 25% }

( background: <default color> url(<path to image>) <repeat> <left pos, top position> / <width, height> )
0
 

Author Closing Comment

by:lapucca
ID: 40440299
Thank you.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now