I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.
by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
CSS:
background-size: 100%;
That should do the trick! :)
Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/
This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo
Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.
Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;
Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)
I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.
Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
Related
I have a webpage like the following:
I am trying to add a small background image in the marked section below:
I tried the following code for the DIV
.king {
background-image: url(../img/banner-lg.jpg);
}
<div class="king">
</div>
But the background image is not coming into display, can anyone help me with this.
try to write like this:-
.hero-image {
background-image: url("/images/photographer.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
As you can see in my snippet if you set some width and height static to the div, the image is showed up.
Be sure that your div has height so he can show your image.
Be sure that the image url() is corrected, did you try to show an external image like http://via.placeholder.com/200x200
.king {
background-image: url("http://via.placeholder.com/200x200");
/*If you comment background-repeat the image will be repeated*/
background-repeat: no-repeat;
width: 500px;
height: 500px;
/*if you comment width and height you just see a grey line taken by <p> tag
if you comment the <p> you don't see nothing*/
}
<div class="king">
<p> Some text Here </p>
</div>
Some good resources:
https://www.w3schools.com/cssref/pr_background-image.asp
https://developer.mozilla.org/it/docs/Web/CSS/background-image
PS: I see in the resources that the form is url('the_path_image')... did you try with '' ?
EDIT
Add an example with no repeated image.
Now the container div is 500x500 and image is 200x200.
If we comment the background-repeat: no-repeat; the image will be repeated for the full div area
You can use below code to set background image.
.king {
background-image: url('../img/banner-lg.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
I want my background image to become responsive inside a div. It has a parallax effect when scrolled. I already tried to customize the background in the media queries but no hope it only adjust the height and doesn't contain the whole page when in mobile devices width. Can someone give me a clue to solve this? Im new to html and css.
html code for div:
<div class="parallax"></div>
css code:
.parallax {
height: 502px;
background-image: url(../img/back2.png);
background-attachment: fixed;
background-position: -70px 80px;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (min-width: 270px) and (max-width: 320px){
.parallax {
max-height: 300px;
background-image: url(../img/back2.png);
background-attachment: fixed;
background-position: -70px 40px;
background-repeat: no-repeat;
background-size: cover;
}
}
You should use property: background-size:100% auto;
If the width property is set to 100%, the image will be responsive and scale up and down.
please see this link for more info: w3schools
I would like to have a background image (in a div) which is always fully displayed on the screen (100 % for the width and height) with a text located on the middle of the div whatever the resolution. (see below) The div in green (#section_header) is the container of the background image.
http://uprapide.com/image/1023303-stack
I'm using JQuery to do this, using the ratio (width/height) of the image I want to display :
var resizeTimer;
jQuery(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeFunction, 250);
});
function resizeFunction()
{
// TO set the image background dimensions
var number = (jQuery(window).width()) ;
jQuery('#section_header').height(number/2.88);
// TO put the text on the middle
var element_w = parseInt(jQuery('#section_header').css('width'),10);
var element_w2 = element_w/2;
var space_border = number - number/2 - element_w2;
jQuery('.column.two-third.column_column.bg_section_header').css('border-spacing',space_border/2+'px 0px');
}
and the css
#section_header {
min-height: 255px;
display: table-cell;
vertical-align: middle;
}
.column.two-third.column_column.bg_section_header {
display: table;
width: 100%;
}
This solution works, but I would like to optimize the solution, because it is pretty slow to load. Any advice?
Thank you
This can be done much simpler using purely CSS :
HTML
<div class="container">
<div class="middle-div">
<p>TEXT</p>
</div>
</div>
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background: red
}
.middle-div {
color: white;
}
See working example here : - EXAMPLE
EDIT
To have the background image stretch and adjust to the screen width, add the following to your main container class :
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*Obviously you would need to replace url(images/bg.jpg) with your own image.
Did you mean something like this? If so you don't need jquery for that.
<div class="mrBigAssWithCenter"> Center Text </div>
.mrBigAssWithCenter{
width: 80%;
height:80%;
min-height:100px;
background:url('http://s3.wallippo.com/thumbs/300x250/black-background-metal-hole-small-0973bb47dba91f8d8959dd9e308cd3ae.jpeg') no-repeat;
background-size:100%;
text-align:center;
border:1px solid #a1a1a1;
color:#fff;
}
Fiddle
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
http://jsfiddle.net/Log82brL/15/
This <img> isn't shrink wrapping as I would expect with min-width:100%
I'm trying to shrink the <img> until either height or width matches the container
Click anywhere in the <iframe> to toggle container shapes
Please try to edit the <img> CSS:
MAINTAIN ASPECT RATIO
COVER ENTIRE SURFACE AREA OF CONTAINER DIV
ONLY EDIT THE IMAGE
My question is specifically: scale an <img> to maintain aspect ratio but cover the entire surface of parent <div> even as the parent <div> resizes.
Maybe I could somehow use css flex box-layout or something? Maybe a transform?
http://jsfiddle.net/Log82brL/7/
#img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
If you don't want to touch the container, put the background on the <img>
#img {
background: url(imgpath) no-repeat center;
background-size: cover;
}
You can set HTML source to a transparent base64 pixel (credit CSS Tricks)
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
http://jsfiddle.net/Log82brL/17/
Did u try the bootstrap solution
http://getbootstrap.com/css/#images-responsive
which is pretty much
.img-responsive
{
max-width: 100%;
height: auto;
display: block;
}
Adding to your update question
http://jsfiddle.net/arunzo/Log82brL/5/
.skinny>img
{
max-width:none !important;
min-height:none !important;
max-height:100%;
-webkit-transform:translate3d(+50%, +50%, 0);
}
And still i am unsure what is that you seek, sorry for the jerky animation.
You can use CSS background instead of HTML img.
.myDiv
{
height: 400px;
width: 300px;
background-image: url('image-url.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
border: 1px solid #000000;
}
<div class="myDiv">
</div>
Here is the JS Fiddle Demo.
Try to change height and width - you will see that image stretches to fill the div.
You can also different background-size values:
Proportional stretch to contain: background-size: contain;
Too tall div
Too wide div
Proportional stretch to fill: background-size: cover;
Too tall div
Too wide div
Stretch to fill 100%: background-size: 100% 100%;
Too tall div
Too wide div
use single css background shorthand property
.myDiv
{
height: 400px;/*whatever you want*/
width: 300px;/*whatever you want*/
background: url('image-url.png') no-repeat center center;
background-size: contain;
}
<div class="myDiv">
</div>
Updated answer. Now works as intended.
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
#container {
overflow: hidden;
width: 400px;
height: 200px;
transition: all .5s;
margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
width: 200px;
height:600px;
}
#img {
height: auto;
left: 50%;
margin: auto;
min-height: 100%;
position: relative;
top: 50%;
transform: translate(-50%, -50%); /* changed to 2d translate */
width: 100%; /* full width in wide mode */
}
#container.skinny #img {
width: auto; /* width reset in tall mode */
}
<div id="container">
<img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>
http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
contained AND centered
I think this is the rendering you're trying to get, this might help ;)
https://jsfiddle.net/erq1otL4/
<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>
#container.skinny {
width: 400px;
height:600px;
}
#container {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
background-color:pink;
background-position: center center;
}
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
A while back I found a jQuery solution called "backstretch". Now this looks possible with CSS3:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
Usually to achieve that you need to use:
parentdiv img {
width:100%;
height:auto;}
in order to make your image resize with the parent div.
This can cause some cropping issues (visually) if you set the overflow to hidden.
Try this:
<div class="img_container">
<img src="image/yourimage.jpg" alt="" />
</div>
<style type="text/css">
.img_container{
width: 400px;
height: 400px;
overflow: hidden;
}
.img_container img{
width: 100%;
height: auto;
}
</style>
setting the height or the with auto will not make the image look stretched.
Use this class of Bootstrap .img-responsive and if parent div changes add media Queries to image and div both
Here is a very simple CSS solution that does not require changing the attributes of an img tag.
div{
background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
height: auto;
width: 400px;
overflow: hidden;
background-size: cover;
background-position: center;
}
Ok so I have a divider image that has the top and bottom parts fading like so:
Can I use a sprite and 3 DIV's for repeating only the middle part of it? I have to mention that my height is variable. How can I do something like that? Do I need 3 images (top, middle and bottom) ?
Current HTML & CSS code for this:
HTML:
<div class="left-side">
</div>
<div class="vdiv25p"></div>
<div class="right-side"></div>
CSS:
.left-side {
display: inline-block;
width: 720px;
}
.vdiv25p {
display: inline-block;
width: 24px;
height: 658px;
background-image: url(../images/vdiv-large.png);
background-position: center center;
background-repeat: no-repeat;
}
.right-side {
width: 236px;
display: inline-block;
vertical-align: top;
}
P.S. I know how to do it with JavaScript or jQuery but I was wondering if there was a CSS-only solution :)
I think i understand what you are asking for now. Please correct me if i am misunderstanding.
http://jsfiddle.net/6fowh58o/
.vdiv25p {
display: inline-block;
width: 24px;
height: 658px;
background-image: url("http://www.artwork.com/press_rl/solid.gif"),url("http://www.artwork.com/press_rl/solid.gif"), url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png");
background-position: top, bottom, center;
background-repeat: no-repeat, no-repeat, repeat-y;
background-size: 100% 10%, 100% 10%, 100% 10%;
}
This code achieves what i believe you are looking for. Setting multiple background images inside of one div (3 in this example). One image is set to the top (backgroud-position), one to the bottom, and one to the center. The order that the images are specified in the (background-image) attribute sets what (Z-index like effect) they will have against each other. The background size is telling the objects what (width,height) they will take of their parent element. To achieve the repeated center image you can use the normal (background-repeat) values.