I am a beginner in html and CSS I was trying to modify my old project by adding a background image and I want the image to take the size of screen while remaining still while I scroll up or down
here is my code
'''
body {
background-image: url(https://lh3.googleusercontent.com/3WHvvnFSspZKbbRkM9SgvIUMDs6efWS5vXgmSglvoHASfV4TUhIFSXd77Ic9x02zAmyrMwpg-py0YceJYVLLCK9SpU9YQU56rm-uTBKb2KoTW3dnjpgVLvhJ26koIF-VXlzao11v=w2400);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1, h2 {
text-align: center;
}
.catphoto {
text-align : center;
}
'''
You can do this with the background-attachment property in CSS.
Example:
body {
background-image: url(https://picsum.photos/1080/1920);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 300vh;
}
.cover {
background-color: aqua;
height: 50vh;
margin-top: 90vh;
padding: 20px;
}
<div class="cover">
(covering up so you can see the effect)
</div>
This fixes the position of the background to a specific place, like an element with the position of it set to fixed. It can easily be ported to your code by adding a single line in the CSS.
background-attachment: fixed;
More information about background-attachment: MDN web.dev
Related
I am trying to fit my background image to my different media queries but i cannot make the image to display completely.
.main {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background: url("images/BANNER.png");
background-size: cover;
position: center;
background-attachment: fixed;
}
#media (max-width:375px) {
.main {
background-image: url("images/BANNER.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
}
<section class="main" id="main">
<div class="content">
<h2>Hello, this is <br><span>Aptos Koalas</span></h2>
LFM!
</div>
</section>
I was able to center de image with background-position but i cannot make the image to show completely.
you are using the background-size: cover; property that will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
try with background-size: contain
So I have background-image that when the browser ocuppies the whole screen, it displays properly. While I make the browser window smaller, the image shrinks up to a point, then suddenly it stops. This is what happens:
I only have a .CSS file that has:
.fondo {
width: 100%;
height: auto;
position: absolute;
background-repeat: no-repeat;
background-image: url("src/assets/images/fondo.png");
background-size: cover;
background-position: center center;
}
And the .html file has:
<div class="fondo img-fluid"></div>
I always use this for responsive background images
Selector{
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
But sometimes i also face this issue
Then i use #media and define size manually at breakpoints or make background with which is not possible in your case
All the best
What you need is height in vh and width in vw:
fiddle to playaround.
.fondo {
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-image: url("http://placekitten.com/301/301");
background-size: cover;
background-position: center center;
}
<div class="fondo img-fluid"></div>
I think it should be background-position: center;
I have a #div element with the following CSS styles:
width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
And the result is the following:
As you can see in the left and bottom part of the element there are two blue lines (the color corresponds to the code #53A7E7).
If I delete the style background-size: cover; both lines disappear and the image covers the entire surface of the element.
Any idea how to fix this?
The original image has the dimensions 1779x683 pixels, but I want it to be fixed for any image size.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>
Don't use background-color and background-size: cover at the same time because the image will be on top of the color. If you need a color around your background-size that is cover, just add border. The background-size: cover is working corectly. In your example I suppose you need display: inline-block.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
border: 10px solid #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></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>
I'm trying to figure out the best method for making a background image fully responsive - so far the best way I can figure out is to use background-size: cover, as most people tend to suggest, but with background-attachment: fixed so that the image scales down it's proportions as the screen resizes, otherwise it just retains it's original proportions and doesn't scale at all. Using just background-size: cover stretches the image to fill the container div, but won't automatically scale proportions..
However I don't want the effect of fixed background that hides part of the image as you scroll down and would prefer it to be background-attachment: scroll, but I can't get that to work and make it scale as well.
So my question is: is there any way I'm not aware of to have the background images scale automatically with screen size without having to use background-attachment: fixed to achieve it?
Please see my JSFiddle for what I've got at the moment: https://jsfiddle.net/uhoL5d5w/2/
(and yes I'm also aware I will be needing to use media-queries at some point to serve optimized images to the various screen sizes)
My current code looks like:
<header>
<div class="launch-bg">
<nav class="menu">
</nav>
</div>
</header>
<div class="page-wrapper">
</div>
<div class="push"></div>
<!-- Footer -->
<div class="footer"></div>
html,
body {
#include box-sizing(border-box);
height: 100%;
}
div,
body {
margin: 0;
padding: 0;
}
body {
display: block;
background-color: #000000;
}
.page-wrapper {
margin: 0 auto -900;
min-height: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 1200px;
}
.launch-bg {
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.footer {
height: 900px;
padding: 6% 0;
color: $white;
background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
Here's a simple example, I think, of what you're asking for, just trimmed it all down for clarity:
header {
display: block;
width: 100%;
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}