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 :)
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 at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
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;*/
}
I was looking for a solution to make my opening background image to be 100% of the viewport and after using Josh powel''s answer here Page height to 100% of viewport? it works on chrome on mac but not on any other browser (on mac or windows) When I say 'it works on chrome on mac', it works in most instances however if I stretch the browser too high, it doesn't fit to cover and I see my next bit of content so it's like it only works for heights up to x...
here's my code:
<section class="intro">
<div class="intro-body">
</div>
</section>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}
.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}
function windowH() {
var wH = $(window).height();
$('.intro, .intro-page').css({height: wH});
}
Fiddle here http://jsfiddle.net/9h98f/1/
If anyone can shed any light, that'd be great.
In order to make an element 100% height of the page, you must also have:
html,body { height: 100%; min-height: 100%; }
It's much better and more reliably to do this in CSS than by using JS.
Alternatively, you could just put the background image on the body (with background-size: cover like you are using).
I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.
I have a background image that is a 3px x 3px pattern.
I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).
I have this implementation:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
}
which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
background-size: 100% 50%;
}
However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.
Is there any way to simply accomplish this?
Thanks
Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.
How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:
<div id="element">
<div id="pattern"/>
<div>I'm at the top!<div>
</div>
The rules:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#element {
position: relative;
min-height: 100%;
}
#element #pattern {
background: url(path/to/pattern.png);
height: 50%;
left: 0px;
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
}
Add another container div
You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.
<div id="container">
<div id="myPattern"></div>
#container{
width:200px;
height:400px;
background-color:black;
}
#myPattern
{
background-color:yellow;
height:50%;
width:100%;
/* fill pattern here */
background-image: url(tt.png);
background-repeat: repeat-x repeat-y;
}
JSFiddle