fluid (background)images to scale on page width - html

I have a background problem with my site.
The thought is not to use any media queries, but to set everything on a % so it will always be viewable on any device.
What my problem is that the background image does have the right css for the with but the height is determined by the content within the div.
I want the height to always be on it's max and scale proportionally.
So what I did is the following:
<body>
<div class="wrapper">
<div class="home_header">
<div class="home_header_quote">
<img src="images/home_header_quote.png" />
</div>
</div>
</div>
</body>
and my CSS
.wrapper{
max-width:1400px;
margin:0 auto;
}
.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: 100% 100%;
max-width:1400px;
max-height:320px;
}
.home_header_quote{
max-width:100%;
height:auto;
}
I hope anyone can provide me with a non-JQuery solution

Change the background size to cover.
.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: cover;
max-width:1400px;
max-height:320px;
}

Related

Background image responding to height

I want my jumbotron background to automatically adjust its height to the screen resolution. At the same time, the width of the image would change only with the same ratio as height, and the rest of width would be hidden.
For example I have this image:
And it shows only part of its height and width.
<div id="j-ricardo" class="jumbotron">
<div class="container">
<h1>David Ricardo</h1>
<p>Najbogatszy ekonomista w historii</p>
</div>
</div>
<style type="text/css">
#j-ricardo {
background-image: url("obrazki/ricardo.jpg");
background-size: 100% auto;
height: 15%;
color: white;
text-align: center;
}
</style>
Background-size: contain; doesn't work like this (the image repeats itself). I want to use HTML and CSS only, no jQuery.
Use contain with background-repeat: no-repeat;

When I design an image in Photoshopt to post as a header in CSS, the resolution messes up

I am quite new to html and CSS, my problem is that each time I post a header image on my HTML file it doesn't fit across the screen. I try width: 100%; but then it messes up the resolution. Here is my current code:
HTML -
<div id="header">
<h1><img src="images/headings/titleheader.png"
width="800" height="150" alt="Munsterberg Designs" border="0" /></h1>
</div>
CSS -
#header {
height: 150px;
background: black;
url(../images/headings/titleheader.png);
}
Is there a way to take my image that is 760x150 to fit across the screen no matter the resolution of someones monitor?
<img> is HTML tag for placing an image into your HTML page/document
"background-image" is a CSS property. You place an image as background into a <div> for eg. not into a <img>
They are COMPLETELY different. Don't confuse both!
If you want the image as 100% width you should put it as 100% at image and header both, and remove "height" property, that's what is breaking the resolution:
#header{
width:100%; /* put header as 100% */
}
#header img
{
width:100%; /* put header's image as 100% */
}
<div id="header">
<h1>
<img src="images/headings/titleheader.png" alt="Munsterberg Designs" border="0" />
</h1>
</div>
If you see, I'm not using "background" or "background-image" because I don't want a background image , I have the actual image at <img> HTML tag
Now if you want the background css approach check for #mdesdev answer and remove <img> tag from your HTML document, you need to choose only one way.
<div id="header">
</div>
#header {
height: 150px;
width: 960px; /* For demo purpose */
background: #000 url(../images/headings/titleheader.png) no-repeat;
background-size: cover;
}
You do not need to add the image within the div in the HTML.
<div id="header></div>
In the CSS, indicate the height and width. To get it to fill the entire width, try using background-size: cover
#header { height: 150px;
background: black url("../images/headings/titleHeader.png") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
This is untested but it should be something similar to this.
This link should also help you

How to decrease size of image when we decrease the browser size.?

I have inserted an image through css. When I decrease the size of browser window the size of image remains same so how to decrease size image.
I coded like following:
<div id="main-content">
<br/>
<div id="slideshow">
</div>
</div>
CSS as follows:
#slideshow{
background:url(img/image.png) no-repeat;
height:512px;
/*margin:auto 30px;*/
margin:40px 28px auto;
position:relative;
}
I did Google very much. But i am not getting how to resolve this issue.
Please can any one help me out to solve this issue.
Thanks in advance..
You aren't looking for changing an image, you are looking for changing a background, which is very different.
You could use background-size to make the background resizable when the element change. Some posible values:
background-size: cover;
background-size: contain;
background-size: 100%;
background-size: 200px 300px;
I usually use cover or contain, both fits image to its container, in different ways. Try it out.
More info about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
use CSS background property to scale the image
#slideshow {
background-size:cover;}
try this
#slideshow{
background:url(res/iphone_small.png) no-repeat;
height:50%;
/*margin:auto 30px;*/
margin:40px 28px auto;
position:relative;
}

creating a website that can scale down and scale up no matter the screen size

i am creating a website on my mac book 13 inch the background image i am trying to use is too big for my screen is their a way to keep the aspect ratio the same when developing on my screen so it will look the same scaled up or scaled down
i have used this code to scale the background image to fill the whole screen
background: url(images/background.jpg) no-repeat center center fixed;
background-size: cover;
background-size: cover;
background-size: cover;
background-size: cover;
i have used a page wrap to wrap the content
#wrapper {margin: 0 auto 0 auto; width:1070px;height:auto;
but it just comes out over lapping the image which is not ment to happen the ration is off because the wrapper is the same width as the space left for it but it overlaps the background image is 1772x1240 the width of the green box is 1070 is their a way of designing and keeping those ratios
Use,
background:url(images/background.jpg) 0 0 no-repeat;
background-position:fixed;background-size:100%;
I am not specific to requirement, but if you are really looking for something that is reusable layout, then follow this. It works in all modern browsers
HTML
<div class="table">
<div class='row'>
<div class='cell'>1</div>
<div class='cell'>2</div>
<div class='cell'>3</div>
<div class='cell'>4</div>
</div>
</div>
CSS:
.table{
height: 50px;
width:100%;
background-color:Red;
display:table;
table-layout:fixed;
}
.row{
display:table-row
}
.cell{
display:table-cell;
line-height:50px;
text-align:center;
}
And a Demo, try to resize the page

Header-bg div 100% isnt really 100%

I got this problem trying to get the header-bg div to always be the full browser width.
I have a background image with some clouds and when I use ctrl+scroll the image stays the original width and stays left aligned. At original page view the bg is perfect 100% width, but I want it to be perfect with al screen widths. Is this even possible or am I wrong?
Heres the code:
body, html {
height:100%;
width:100%;
margin:0;
padding:0;}
#header-bg {
background-image:url(images/header/header-bg.jpg);
background-repeat:no-repeat;
min-width:100%;
width:100%;
margin:0;
position:fixed;
height:402px;}
<div id="header-bg">
<div id="header">
<div id="navigation">
</div>
</div>
</div>
Thanks for looking!
By default, the background image cannot resize. The background-size property has to be used to get your background to fill the whole DIV:
#header-bg {
background-image: url(images/header/header-bg.jpg);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/*Other CSS*/
}
This CSS feature is supported by:
Firefox 3.6+
Opera 9.5+
Chrome 1+
Safari 3+
Internet Explorer 9+
If you cannot use this property, your only remaining option is using a <img> element.Fiddle: http://jsfiddle.net/Hf79s/
<style>
#header-bg{
width:100%;
height: 50px;
}
#header-bg-img {
height: 100%;
width: 100%;
}
</style>
<div id="header-bg">
<img src="images/header/header-bg.jpg" id="header-bg-img" />
</div>
You could just make the background image extra wide, so it will fill big screens too. The only downside is that smaller screens won't see the entire image, but when it is only decorative clouds, it should be fine.
The other solution is background-size. But this has the disadvantage that the background will either be scale disproportionately, or the bottom of the image is clipped. Also older IE versions don't support it.