I am working on a file html+css and I want to create background-image full-screen in HTML, and CSS I have set all properties for background image.
I want that background-image to fill all full-screen on devices and without scrolling on background-image so I try to do this:
* {
margin: 0;
padding: 0;
}
.background-image {
position: relative;
}
img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: fixed;
height: 100%;
width: 100%;
}
</style>
<div class="background-image">
</div>
I set the background-image position relative and img position fixed to make fixed without scrolling but it brings the background-image is streched also text? Any idea to fixed it ?
If you want a background image use create a container and with css add the background-image property to the container: url('the path of my img')
Some advice I can give you is:
img
Use IMG if you want people to print the page and you want the image to be included by default.
Use IMG if you want the browser to display an image in proportion to the size of the text.
Using IMG instead of background-image can drastically improve the performance of animations over a background.
css background-image
Use CSS background-image if the image is not part of the content.
Use CSS background-image when the image replaces the text
Use CSS background-image combined with CSS background-size:cover in order to stretch a background image to cover the entire container
Use CSS background-image if you want people to print the page and you do NOT want the image to be included by default.
use the object-fit property and object-position property.
Here you are not actually working on the background. The image is a element not a background. To make it a background you have to use URL of the image.
Related
I want to put an image in background of the page and in of course it must be in a responsive way
this is the html code :
<div > title </div>
<img src="/assets/img/image1.jpeg" />
and the css :
img {
background-size: cover;
background-repeat: no-repeat;
}
Marshall's solution is better if you want the image to cover the whole viewing area.
Although it would not be in the background, using your <img/> tag it would be like this:
img {
width: 100%;
height: 100%;
}
<div> title </div>
<img src="https://picsum.photos/200/300" />
You want to set the background-image propierty of the body
body {
background-image: url("/assets/img/image1.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
A background image for the page would be best placed on the body element — here's a simple example which uses the background shorthand:
body {
background: url('../relative/path/to/img/goes/here') no-repeat #paleblue;
}
Here, we've provided the image, an instruction that the image should not repeat (it will by default), and a 'fall-back' background colour — this is useful if, for example, the image fails to load.
There's more that can be done, here. See MDN for more details. Pay special attention to background-size, as you'll likely want to use either cover or contain depending on the image, screen size, etc. The spec for both is straightforward, but you can very easily swap one for another and back again in your code and see the (often obvious) effect each has.
you can add background property to which container you want the background img is, if its body or any other container, also add to your img width and height property otherwise it will go beyond the container, you should add 100% if you want to cover the whole container.
background-position:center center
I have an app https://bootstrapp3.herokuapp.com/ the background image changes size when I add text. After using the inspect element function on the browser it seems that it is the font-size property that is affecting the background-size property, since when I uncheck the box related to font-size using inspect element, the background-size returns to the normal size. Why is the background size changing? compare the following two pages from the app:
Without text and font-size:
https://bootstrapp3.herokuapp.com/pages/page1
Background-size changing due to font-size:
https://bootstrapp3.herokuapp.com/pages/consulta
note that the only difference between the pages is the content in the view. Both pages inherit from the application layout.
css with the background size:
body {
background-image:image-url('gotita.png');
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
}
font-size element:
p {
font-family: 'Architects Daughter';
font-size: 20px;
}
You have set background property to cover. If you want to make it independent then apply the background to an empty div having the size you want to set. Then add text in another div having its position to absolute.
Now, changing the font size will not affect the background image.
It's because you are using:
background-size: cover;
on the body element. The height of the body is relative to all of the child elements. So, because of that, the background-image has to adapt to fill the height.
To make the background image the same on all the pages not depending on the content you could remove the background image from the body tag and make a div inside the body tag with position fixed, like:
background-image: url(/assets/gotita-7c57f01….png);
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
position: fixed;
Have a look at the background-size attribute you have assigned. This attribute can be described as follows:
contain : "Scales the image as large as possible without cropping or stretching the image."
cover : "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."
Source: MDN Web Docs
Site URL: http://theneonplanet.com.au/home-2-2/
Hi, I am working on this wordpress website. I use divi theme but I manually change things with css.
second section image
this is currently placed in the recent stories section.
The problem is that the post image is placed correctly but it is stretched inside the div and it looks very strange; the picture is not suppose to be this thin.
I want the image to be filled inside the div. which means it doen't need to be the same width of the div but it has to fill the space.
is there any code solution for this?
I tried object-fit, and min and max height. both didn't work..
There are multiple ways to make an image fill a div element using CSS. The easiest way would be to set the image as the background-image of the div and set the background-size to cover. You can also set the background-position to align the image.
div {
background-image: url("image.jpg");
background-size: cover;
background-position: center;
}
But in your case, you seem to be using a WordPress plug-in which inserts the image as an img tag inside the div and stretching the image to the size of the div. So we can use the object-fit CSS property on the img element to make the image fill the size of the img element.
Your code will look something like this.
#tesco-slider .et_pb_slide_image img {
object-fit: cover;
object-position: center;
}
Just as with the background-image approach, object-fit: cover will make your image fill the size of the img tag and object-position: center will align the image to the center.
use background-size: cover; attribute in your css for the background image
I currently have an image that covers some screen resolutions, but if the screen resolution is bigger than the image, it will be white for each pixel its bigger, so instead of that ugly white, I want a color behind that background image so it wont look ugly. My current code is just an img tag for the background and the css scales it up to 100% but if the screen res is larger than the image res, it will create problems.
Is there a specific reason why you're using an img tag as your background image, instead of setting a div to have it's background as that image? Because you can do this with css fairly easily.
.background-div {
width: 100%;
height: 100%;
background: url(your_image_url) no-repeat;
background-size: cover;
background-color: #e3e3e3;
}
Where the .background-div would be in place of your img... This could also be the body of the document, or whatever. It's just a container div that covers the whole background.
The background then has a fallback colour of #e3e3e3, and background-size: cover means that it will always scale the image to fill the screen, so you won't see that colour.
You could also use contain instead, which would make the image scale how you're expecting, and show the background colour where the image doesn't reach.
Find the parent div of your image and add a stylesheet attribute.
It will look something like this
<div class="parent" style="background-color: #000000;height: 100%;width: 100%;">
<img src="your image url" class="image" alt="alt" title="your title"/>
</div>
the attr style="background-color: #000000;" will give the div a black background color.
You can also set the background color by its classname insde you style.css file. Or what ever you named the file.
.parent {
background: #000;
height: 100%;
width: 100%;
}
.parent img {
max-width: 100%;
}
I hope this is the awnser your searching for. If not, provide some more details. Maybe show the structure of your current code.
I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can't change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.
I can't seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use 'width: 100%' but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.
I've added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.
<div id="image-container">
<div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>
Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?
Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.
I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done.
Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so:
body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}
This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript.
EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know.
Hopefully soon you'll be able to use the new srcset attribute on the img element. If you want to use img elements now, the currently accepted answer is probably best.
However, you can create a responsive background-image element with a constant aspect ratio using purely CSS. To do this, you set the height to 0 and set the padding-bottom to a percentage of the element's own width, like so:
.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* for a 4:3 aspect ratio */
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value. This works because padding percentage is always calculated based on width, even if it's vertical padding.
Try this
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Simplified version
html {
background: url(image.jpg) center center / cover no-repeat fixed;
}
Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%;.
Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.
Edit: Changing the image on different size of the window
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>
In this way you change your image in different size of the browser.
You can use the CSS property background-size and set it to cover or contain, depending your preference. Cover will cover the window entirely, while contain will make one side fit the window thus not covering the entire page (unless the aspect ratio of the screen is equal to the image).
Please note that this is a CSS3 property. In older browsers, this property is ignored. Alternatively, you can use javascript to change the CSS settings depending on the window size, but this isn't preferred.
body {
background-image: url(image.jpg); /* image */
background-position: center; /* center the image */
background-size: cover; /* cover the entire window */
}
Just use a two color background image:
<div style="width:100%; background:url('images/bkgmid.png');
background-size: cover;">
content
</div>
Add the css:
html,body{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100%;
}
And html is:
<div class="bg-mg"></div>
CSS: stretching background image to 100% width and height of screen?
It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.
.your-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
html{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
I was also facing your problem. Two solutions come to my mind through HTML and CSS :
Solution 1) HTML img tag
.img-container {
width: 100%;
border: 1px solid #000;
}
.img-container img {
width: 100%;
pointer-events: none;
}
<div class="img-container">
<img src="https://i.postimg.cc/ht1YnwcD/example.png">
</div>
Solution 2) CSS background image
First find width and height of your image file, you can right click on your image and choose Properties then go to details tab. you can see your image dimensions (according to the picture).
enter image description here
Then remember them.
.img-container {
width: 100%;
// height: calc(100vw / (your image width / image height));
height: calc(100vw / (812 / 133));
background-image: url('https://i.postimg.cc/ht1YnwcD/example.png');
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
border: 1px solid #000;
}
<div class="img-container"></div>
I hope it was useful ;)