I have an issue with the background image for a header.
I'm creating a non-responsive website with a minimum width of 960px for the content area.
When the screen is 960px or larger, the background image in the header goes across the entire screen.
When the screen is smaller than 960px, the background image in the header starts to shrink to the left, leaving white space on the right side when you scroll to the right.
Is there a way to:
Not make the screen scroll so far that white space appears?
and/or
Make the background image appear as far across the screen as scrolling allows?
Here is my CSS:
header {
display: block; /* So that all browsers render it */
margin: 0 auto;
height: 300px;
background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
background-attachment: fixed;
}
.subWrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 50px 50px;
background-color:rgba(255,255,255,0.7);
}
And my HTML:
<body>
<header>
<div class="subWrapper">
</div>
</header>
</body>
Please see this JSfiddle for an example:
http://jsfiddle.net/QrMV4/2/
Thank you so much!
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
Demo Here
If I understand your question right...
Insert:
overflow:hidden;
In header
You need to replace the background-attachment: fixed to scroll and put width on header as you mean to have the header on center, replace the widt:960px of subWrapper to 860px on subwrapper and remove margin-left:auto and marging-right: auto...
You can have a look on jsFiddle to
http://jsfiddle.net/9YuW6/
header {
display: block; /* So that all browsers render it */
margin: 0 auto;
height: 300px;
width:960px;
background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
/*background-attachment: fixed;*/
}
Related
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.
For my header, I have a repeating element that will expand whatever the browser width is -- 2000px, 4000px, etc. Inside the header element, I have a 1200px wide background that is fixed. My page layout is 960px wide.
If I set the fixed with to 1200px, horizontal scrollbars will appear for users with a browser width below 1200px.
How can I make it so people with a 1100px browser window will not see horizontal scrollbars?
header {
background: #000 url("/images/bg-header-repeat.png") repeat;
position: relative;
}
.header-wrapper {
background: url("/images/bg-header.png") no-repeat left top;
margin: 0 auto;
min-height: 100px;
width: 1200px;
}
.container {
margin: 0 auto;
width: 960px;
}
don't give static (and that large) width to your container.
do this:
.header-wrapper {
background: url("/images/bg-header.png") no-repeat left top;
min-height: 100px;
width:100%;
position:relative;
left:0;
top:0;
}
.container
{
position:relative;
width:80%;
}
giving large static width is prone to bring horizontal scroll bar in some resolution.
If you want to cover entire browser width on a wide range of resolution that, give width in percentage.
Also making your container position:relative makes its top, left, right and bottom properties active. so you won't need to use margin. These properties pick their value relative to the parent container.
Try adding max-width so the header changes width on smaller screens:
.header-wrapper {
background: url("/images/bg-header.png") no-repeat left top;
margin: 0 auto;
min-height: 100px;
max-width: 1200px;
}
I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)
As I add in divs within, the height changes and the layout gets out of hand.
what I want is really simple, something like the image shown
[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ]
I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)
So I made something such as
<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>
by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.
As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?
EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)
The fiddle: http://jsfiddle.net/Nu2wH/
html, body {
height: 100%:
padding: 0;
margin: 0;
}
#page {
background: #444444;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}
#sidecolumn {
width: 45%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
float: left;
}
#sidebar {
background: #ddd;
}
#maincolumn {
padding: 5%;
width: 40%;
float: right;
background: #AA9933;
height: 100%:
}
#content {
background: #ddd;
}
You Can Use the css 3 declaration background-size, for all browsers
background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}
Not very conventional but works :)