I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
Related
How can I disable responsive background img behavior ?
My background img in larger screen is like this :
And I want this behavior when I resize screen (small screens). (I want that the img will be cut automatically) : does a css property exist for this ?
My code is :
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
<div class="container-full bg">
<div class="container">
<div>My content....</div>
</div>
I am in bootstrap project , and my background img is responsive, how can I disable this please ?
here is a quick cutout. You can position the image left, center or right. The image will be trimmed automatically.
You can define the height for yourself.
body {
margin: 0;
}
.bg {
background-image: url("https://i.stack.imgur.com/jtaEI.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 400px;
}
<div class="bg">
<div>My content....</div>
</div>
edit
Please be aware that you need semicolons in .css after each declaration
your code:
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
need to look like this:
.bg {
background-image: url("assets/images/bg.png");
background-repeat: no-repeat;
}
I was trying to put background image but it is not showing.
.jumbotron{
background-image: url("/src/assets/shop1.png");
background-size: cover;
}
<div class="jumbotron">
Welcome to Home Page
</div>
The background image will look at the height and width of the div. Please follow the code to see the image.
.jumbotron {
background-image: url('https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-size: 100% 100%;
height: 100px;
width: 100%;
background-repeat: no-repeat;
}
Working demo
I'm attempting to set this image as the background of the page, and for whatever reason it just won't work. The intention is to make the background image cover the page, without cropping vertically or horizontally.
Note: The CSS file is connected to the document.
HTML:
<body>
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
</body>
CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}
Hope this will work for you:
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
You should try background-size: Cover; may be an image will be cut from right or bottom but with background-size: 100% 100%; image can stretch. It totally depends on image size.
please do not use this css attribute "background-repeat: no-repeat;" if you want full screen image.
Actually you can solve this issue in two ways.
1.use the fullimage and repeat the image if size of the screen is large
2. stretching the image to the full width.
please look at the below code:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
another meathod is below here.
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
I have image (width = 1920px) and I need to show the whole image at Full HD resolution (width=1920px) the middle of the image at smaller resolutions (see screenshot):
screenshot
Could you help me add CSS style to display center of image at smaller resoultions?
//html:
<body>
<div class="header">
</div>
</body>
//css:
html, body {
margin: 0;
padding: 0;
}
.header{
background-image: url(Header.png);
width: 100%;
height: 292px;
}
Try this one:
background-image: url('path/to/img.png');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
And optional:
background-position: center;
Use background-position: center; to center the image, so when the width is less then the image size, the center will be remain visible.
.header {
height: 1080px;
background: url(http://www.cats.club/wp-content/uploads/2017/03/image_header_option.jpg);
background-size: cover;
background-position: center;
}
<header class="header"></header>
Just use background-position: center; and background-size: cover;.
You can find documentation on these attributes and property values here.
See the snippet. The original image is of three pirate skulls. Here you can see it is centered on the parent div.
.header {
width: 200px;
height: 200px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Christopher_Condent.svg/1000px-Flag_of_Christopher_Condent.svg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="header">
</div>