https://jsfiddle.net/r7d5fLe4/
<span class="emote" style="background-image: url(https://static-cdn.jtvnw.net/emoticons/v2/90076/default/dark/1.0);">
I have some same spans with background-image.
Why the images become a little bigger except the last one in a line?
I suggest doing this on your body with CSS only. Putting it on a span could be problematic. Unless you want it to only be the background of an independent section, then I would use a div instead of span. (See example two). See the CSS changes in example one.
example one
body {
background-image: url('https://static-cdn.jtvnw.net/emoticons/v2/90076/default/dark/1.0');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0.4em 0.2em;
position: relative;
box-sizing: border-box;
}
example two
div {
width: 100px;
height: 100px;
background-image: url('https://static-cdn.jtvnw.net/emoticons/v2/90076/default/dark/1.0');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0.4em 0.2em;
position: relative;
box-sizing: border-box;
}
<div></div>
All in all, I suggest a higher-res (larger) image for a background.
Related
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
I have been struggling for the past several weeks with the parallax effect in a section on the profile page I am building.
In this section, I have three 4-column divs. The 1st div contains my text, the 2nd div contains one large background image, and the 3rd div contains two smaller background images.
I added background-attachment: fixed; to three images, and while it works fine with the large image in the 2nd div, the other two images get stretched beyond recognition. Here is the CSS styling that I have right now: https://codepen.io/snailssnooze123/full/BmPxgN/
#about-bg-selfie {
background-image: url("https://www.dropbox.com/s/aqf4nj496qeg0db/alleyPic.JPG?raw=1");
height: 500px;
width: 300px;
background-repeat: no-repeat;
background-position: center;
background-size: 35%;
background-attachment: fixed;
border-top: 500px solid transparent;
border-left: 90px solid #fff;
margin-left: 60px;
padding-right: 250px;
}
#about-bg-pyramids {
background-image: url("https://www.dropbox.com/s/savr06trk2onj2c/pyramids.jpg?raw=1");
min-height: 250px;
width: 350px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#about-bg-temple {
background-image: url("https://www.dropbox.com/s/twatj0fumugvrbg/temple.jpg?raw=1");
height: 240px;
width: 350px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 10px;
}
Here is what I would like the picture on the right to look like, only with the Parallax effect:https://codepen.io/snailssnooze123/full/LOBmgB/.
I have been playing with the code for days and can't get it to work. Could anyone help me figure this out? I'm afraid I must be missing something really obvious here :)
I found what is the problem.
you have to remove this from "#about-bg-pyramids" and "#about-bg-temple" css :
background-attachment: fixed;
I wish i never had to ask this but im confused.
So i have a basic background image on my div and for some reason when i set the background-size: 246px 70px; it does not work, only if i use !important it works.
.footer div.image-logo {
height: 70px;
width: 246px;
background-size: 246px 70px;
background-position: center;
background: url(/images/svg/five_Logo.svg) no-repeat;
margin: 20px auto;
}
Now basically you would think other css is overwriting it, well thats my rookie thought but it is not, when i inscpect the div with the background image, and click the tab "computed" to check the current state of the background-image-size it says background-size:auto;, and when i click on this to see where it gets the property auto it shows 246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo which is the css where i set my background size to background-size: 246px 70px;.
I would like to be able to set the background size without using !important
The background shorthand includes background-size:auto and this is overriding your previous background-size statement.
Put the background-size statement after the background shorthand statement.
div {
width: 400px;
height: 300px;
margin: 1em auto;
}
.one {
background-size: 200px 100px;
background: url(http://www.placebacon.net/400/300) no-repeat; /* I win */
}
.two {
background: url(http://www.placebacon.net/400/300) no-repeat;
background-size: 200px 100px; /* I win */
}
<div class="one"></div>
<div class="two"></div>
Syntax is;
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
Ex:
body {
background-image: url(photo.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-color: #ccc;
}
Therefore you might want to re-order. (Clear cookies as well)
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;
}
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/