i need a responsive background image that will scale and keep its aspect ratio when resized within its container, anybody have any suggestions. This is what i been working on for 3 days, everything works great but the container takes up alot of space, and if i mess with the height it will mess up the aspect ratio.
HTML:
<div class="wrapper">
<h2 class="heading">Responsive Background CSS</h2>
<div class="container">
Background Image Applied Here
</div>
<section class="about"></section>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.cf:before, .cf:after, {
display: table;
content:"";
}
.cf:after {
clear: both;
}
.heading {
color: #000;
font-size: 40px;
text-align: center;
}
.container {
position: relative;
min-height:1px;
padding: 0;
max-width: 80%;
background-color:orange;
margin: 30px auto;
}
.image {
background:url(img/image%201.jpg);
display: block;
max-width: 100%;
padding-bottom: 177.7777777777778%;
height: 0;
background-size: 100% !important;
background-repeat: no-repeat;
}
.about {
width:100%;
min-height: 500px;
background-color:tomato;
position: relative;
}
You can try this custom plugin made for responsive images(background)
http://webonise.github.io/jQuery-plugins/fullScreenImage/responsive-full-screen.html
You could always just change the image depending on the screen size. You'd want to use the same image, just different sizes. This way you can crop the images in ways that better display your intentions for the background image.
Here's a demo. Change the browser size to see the changes.
Related
I am new to web development and so to Stackoverflow.
I am stuck at changing width to make it responsive.
Below, I have got this example that's meant to be explaining the property background-blend-mode. After I finished with it I wanted to use it as a refresher to previous lessons. I wanted to style it to make it responsive in terms of changing the max and min width properties.
div {
width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
<html>
<div>
</div>
<div class="multiply">
</div>
</html>
What happens is when the viewport's width (at Chrome) changes to less than 740px the divs display as block element. When I got to use thebox-sizingproperty to set its value to border-boxit changed the break point to 620px instead of 740px which means that any width under 620px makes the divs still display as block elements.
What I am stuck at is set a responsive viewport for these divs so they are always displayed as inline elements, no matter what viewport's width is.
Thank you
Check this one
div {
width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
#media only screen and (max-width: 767px) {
body {
text-align: center;
}
div {
width: 48%;
height: auto;
margin: 15px 0;
padding: 13% 0;
}
}
<div></div>
<div class="multiply"></div>
What kind of responsive do you want? Responsive really just means responds to -- the screen size. So the behavior is really up to you. From exactly what I'm seeing you have two options.
Responsive in just the width. This means that as you scale down to smaller than the two block size they'll scale down width wise only. To achieve this you set you max-width to 280px then because you have two objects you want to set the width to 50%. The problem with this is at some point you'll end up with very narrow blocks.
div {
max-width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
width: 50%;
}
.multiply {
background-blend-mode: multiply;
}
https://jsfiddle.net/6fjcoxmt/4/
Responsive in aspect radio. The other option is keeping the aspect ratio where you need to use a technique with an pseudo element that holds the parent's aspect ratio. You still need to use the technique from 1. but it gets a bit more complicated. Your element's wrapper will need to control the aspect ratio.
<div>
<div class="inner"></div>
</div>
<div class="multiply">
<div class="inner"></div>
</div>
Notice now .inner was your previous element's visual and the parent div will focus on controlling the height to width ratio:
div {
display: inline-block;
margin: 10px;
max-width: 280px;
position: relative;
width: 50%;
}
div:after {
content: "";
display: block;
padding-bottom: 58.8%;
}
.multiply .inner {
background-blend-mode: multiply;
}
.inner {
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center center;
background-size: contain;
bottom: 0px;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
width: 100%;
}
https://jsfiddle.net/6fjcoxmt/16/
Try it. I have added some css and media query for responsive.
* {
padding:0;
margin:0;
list-style:none;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.common {
width: 340px;
height: 200px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
#media screen and (max-width:767px){
.common{
width:45%;
height:auto;
margin: 10px auto 10px;
padding: 14%;
}
.wrap{
text-align:center;
}
}
<html>
<div class="wrap">
<div class="common"></div>
<div class="common multiply"></div>
</div>
</html>
The example below has an gray div (#outer) with a child orange div (#inner). #inner will fill the page proportionally on width only. Is it possible to have #inner scale proportionally based on width and height using only CSS? Please, no Javascript solutions as I am aware of how to accomplish it that route, but would prefer a CSS solution if possible.
http://jsfiddle.net/Gchr4/
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#outer {
background-color: #EFEFEF;
width: 100%;
height: 100%;
}
#inner {
background-color: #ff9933;
width: 100%;
padding-top: 50%;
}
HTML
<div id="outer">
<div id="inner"></div>
</div>
Javascript example of what I am attempting to achieve: http://jsfiddle.net/Q4Qdy/
Use height:100% for the #inner.
However, due to your padding, the height will add 50% to it. This will be fixed by using box-sizing:border-box, but this still has some browser issues. So if you don't have to add padding, i would suggest to remove it.
working example
#inner {
background-color: #ff9933;
width: 100%; height: 100%;
padding-top: 50%;
box-sizing: border-box;
}
It is possible using media queries (and min-aspect-ratio, in particular) and viewport units: http://jsfiddle.net/79Fhb/.
HTML:
<div id="outer">
<div id="inner"></div>
</div>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#outer {
background-color: #bbb;
height: 100%;
}
#inner {
background-color: #ff9933;
}
#inner:before {
content: "";
display: block;
padding-top: 50%;
}
#media screen and (min-aspect-ratio: 2/1) {
#inner {
height: 100%;
width: 200vmin;
}
}
I've been reading a lot of entries to figure out why my content won't force the body and html tags to stretch to 100% of the inner content's height.
My page is here: http://truerenaissance.devmu.com/artisthighlight/
You'll see the background image (set on the body tag) is not stretching to 100% of the page or inner content's height. I am only using position: relative everywhere. I'm also using a 'clearfix' at the bottom of the content.
If anyone has any ideas as to why this is happening, I'd really appreciate it.
html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; }
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75);
padding: 0px; z-index: 10; }
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; }
.clear:before,
.clear:after {
content:"";
display:table;
}
.clear:after {
clear:both;
}
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; }
<html>
<body>
<div id="body-wrapper">
<div id="site-wrapper">
<div class="inner">
</div>
</div>
</div>
</body>
</html>
Thanks!
Well you constrained the body height to the viewport height and you didn't stretch the background vertically.
Remove height: 100% from html and body and use background-size's cover value.
Thanks for the big-ass picture by the way.
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
I need create element, that cover whole page except 20px margin on all sides. I try this and it works in webkit browsers and Firefox, but Internet Explorer (10) and Opera have problem with this :-( . Any idea how to solve this?
HTML
<div id="first">
<div id="second">
Hello world!
</div>
</div>
CSS
head, body
{
width: 100%;
height: 100%;
}
body
{
position: absolute;
margin: 0;
background-color: blue;
display: table;
}
#first
{
display: table-cell;
height: 100%;
width: 100%;
padding: 20px;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
I'd suggest:
#first {
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
Which will position the element 20px away from each of the sides. However I'd suggest not using display: table-cell; since that requires a parent element to have display: table-row which itself then requires a parent element with display: table.
Also, it looks like you're trying to emulate table-based layouts, if you could list the overall problem you're trying to solve you may get better/more useful answers.
Try a solution like this:
http://jsfiddle.net/cyHmD/
Never use position:absolute and display:table on body - leave those properties as they are since body is your base from where you build the rest of the site - at most use position:relative on body tag. box-sizing changes how the browser box model is calculated - for example instead of calculating 100% width + 20% padding + 20% border = 140% it calculates as 100% width + 20% padding + 20% border = 100%.
This solution will work from IE7 on including IE7.
head, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background-color: blue;
}
#first
{
position:absolute;
width:100%;
height:100%;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
How about this? Simply replace required margin with border:
#first
{
display: table-cell;
height: 100%;
width: 100%;
border: 20px solid blue;
background-color: white;
}