I have following css :
.image{
background: url('image.png') no-repeat;
width:100%
}
My image size is small and I want this image to be stretched in full screen with repeating it .Please help me on this .
Thanks.
Use background-size: cover; ... but bear in mind that if it is a small image - then by stretching it the quality of the resulting background may be poor.
DEMO
CSS
div {
background: url('http://lorempixel.com/400/200/food') no-repeat;
width:100%;
height: 100vh;
background-size: cover;
}
Related
I just created about us page and added banner as background image.When i reduce the screen the image is getting dissorted.It is not responsive to all the screens.Here is the css
section.titlebar {
background: url(../images/team-bg03.jpg);
background-repeat: no-repeat;
background-position: 0px 89px !important;
height: 914px;}
Tried by adding this
section.titlebar {
background: url(../images/team-bg03.jpg);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
If i am giving background size as contain it is not getting the full width banner but i need to get as full width banner
The cover property is what you're looking for. However - this may lead to some cropping of the image at different breakpoints.
section.titlebar {
background: url(../images/team-bg03.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
I have a background image in the following div, but the image gets cut off
Is there a way to show the background image without cutting it off?
This is actually a pretty easy fix. Most of it comes down to using percents to specify the size of the image rather than pixels.
div {
background: url(img.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
You could use the background-size: cover; property to get the image centered, though what you are trying to achieve will be always impossible except in case the dimensions of the background image matches perfectly the dimensions of the container div; otherwise, it will always result in a distorted image. I guess background-size: cover; is the most approximate.
.contain_img {
width: 300px;
height: 200px;
background-image: url(https://unsplash.it/200/300?image=1082);
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
<div class="contain_img"></div>
Right now my wordpress site is set up so the images scale when the screen size changes. I was hoping that, instead, the image can remain at a specific size in the center of the screen and become cropped equally on the left and right when the screen size changes.
I have tried max-width:none but that doesn't keep and crop the image in the center of the page.
Site: Zxndesignco.com
The image in question is the only image on the home page. I only know CSS so I was hoping there is a CSS solution.
Example of what i'm taking about: https://gatewaydemo.wordpress.com/
Thanks for the help.
The general idea is to not use an image, and make that image the background-image of that hero section instead. So delete the img tag and add something like this CSS to .sow-image-container height: 400px; background: url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg) center top; background-size: cover
body{
background-repeat:no-repeat;
background-position:center center fixed;
background-image:url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg);
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.white{
font-size: 24px;
color: #fff;
}
<div>
<p class="white">Here are some words</p>
</div>
Usually in the body or in a div. I like this group because it covers all the browser bases.
I have a div tag like
<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>
This div is associated with a css like
#MainMenu1
{
height:53px;
background: url(../images/top_banner.png) no-repeat;
background-position:center;
margin:auto;
width:100%;
border:0;
}
I see that the background image is fine on a smaller screen but on a wider screen, it occupies only the center position. I want the image to occupy the full screen even on wider screens and I do not want the image to "repeat".
How would I do this?
#MainMenu1
{
height:53px;
margin:auto;
width:100%;
border:0;
background: url(../images/top_banner.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this. It works perfectly for me. It should fit the background perfectly in the center and reasonably stretch it to whatever screen size the website is being viewed on.
You can either let the image repeat meaning it covers the whole space or use background-size: cover which will scale it to cover the whole area while keeping the original aspect ratio of the image.
I have three problems:
When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image?
I have a smaller image and I want to use in a bigger div. But don't want to use repeat function.
Is there any way in CSS to manipulate the opacity of an image?
Resize the image to fit the div size.
With CSS3 you can do this:
/* with CSS 3 */
#yourdiv {
background: url('bgimage.jpg') no-repeat;
background-size: 100%;
}
How Do you Stretch a Background Image in a Web Page:
About opacity
#yourdiv {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Or look at CSS Image Opacity / Transparency
To automatically enlarge the image and cover the entire div section without leaving any part of it unfilled, use:
background-size: cover;
This worked perfectly for me
background-repeat: no-repeat;
background-size: 100% 100%;
Try below code segment, I've tried it myself before :
#your-div {
background: url("your-image-link") no-repeat;
background-size: cover;
background-clip: border-box;
}
Rather than giving background-size:100%;
We can give background-size:contain;
Check out this for different options avaliable: http://www.css3.info/preview/background-size/
This will work like a charm.
background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
I agree with yossi's example, stretch the image to fit the div but in a slightly different way (without background-image as this is a little inflexible in css 2.1). Show full image:
<div id="yourdiv">
<img id="theimage" src="image.jpg" alt="" />
</div>
#yourdiv img {
width:100%;
/*height will be automatic to remain aspect ratio*/
}
Show part of the image using background-position:
#yourdiv
{
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10px 25px;
}
Same as the first part of (1) the image will scale to the div so bigger or smaller will both work
Same as yossi's.