for some time we are struggling with white lines at the edge of the image containers. It occurs when we use the image with src or html elements with background image in css, mostly on mobile views. We tried these scenarios:
div with background-image, background url
div with more than one background urls
images with position:absolute and container position:relative
The only half-solution seems to change image position to absolute while the container is relative and set for example top: -2px. But still, sometimes it occurs especially with zoom on mobile devices.
This bug can be seen between two sections too but only on a mobile device or google chrome developers' device toolbar.
White line bug image
html,body {
padding: 0;
margin: 0;
}
.parent-container {
height: 100vh;
background-color: #600cb5;
}
.child-container {
background-color: #600cb5;
height: 50vh;
}
.child-container:nth-child(2) {
background-image: url('https://res.cloudinary.com/dfvpybkta/image/upload/v1647105459/test/Frame_1_atbkfx.png');
background-repeat: no-repeat;
background-color: white;
background-size: cover;
}
<div class='parent-container'>
<div class='child-container'></div>
<div class='child-container'></div>
</div>
Related
My objective is to have a full-screen parallax background that is blurred.
The problem is that when you blur an element it no longer spans the full size of the container (because the edges are blurry). I found an example that suggested using transform:scale in order to stretch it just a little bigger than the size required for 'cover', although now this now makes it so that when you scroll down the page the background slowly moves down as well (once again exposing the blurred edges).
HTML
<div class="viewport"></div>
CSS
.viewport {
background-image: url("images/img1.jpg");
background-attachment: fixed;
filter: blur(7px);
position: relative;
transform: scale(1.1);
background-size: cover;
background-position: center;
height: 130vh;
z-index: -1;
}
Consider putting the viewport in a viewport-wrapper with hidden overflow?
HTML
<div class="viewport-wrapper"><div class="viewport"></div></div>
CSS
.viewport-wrapper {
overflow: hidden;
}
Codepen
I am using a series of a div elements to display a set of client logos. The reason for using background images was to allow the images to be vertically and horizontally centered within the div, instead of a more hack-y solution using img elements.
The issue: I am using a fluid, responsive grid, so when the browser is below the max width (1000px), the div elements begin to shrink. This causes some of the client logos (the background images) to clip at the edges. This is a given. I would like to have these images begin to scale down when the hit the edges of the parent element.
background-size: contain partially solves this. The only drawback is that it also scales the background image's size above 100%, which is an issue. It stretches the logo which is not a good solution for me.
I could also just not use background-size, and have the client logos have a max-width set. This, however, causes the client list to go to extra rows for responsive layouts. I would like to avoid this, but to me this is the only working solution.
That being said, is there anyway to utilize the background-size without having it scale up? Or is there another way to approach this that would keep the images centered within their box?
Here's quick look at the code:
HTML
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
CSS
.clientlist .client { width: 20%; height: 90px; float: left; } /* Five clients a row */
.clientlist .client div {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat; } /* Vertically centers background images */
.clientlist .client .bcs { background-image: url(../images/client-bcs.jpg); } /* bunch more like this to define image */
It doesn't look like this is possible yet.
Based on the syntax examples on https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax, you would think you could do something along the lines of "background-size: auto, auto, contain;" but it didn't play out that way in my initial testing on Chrome, FF and IE. They all seem to do fine with SVGs. Chrome and IE fail with PNGs. All of them fail with GIFs.
To me, it seems like this behavior we are looking for is spelled out pretty clearly on http://www.w3.org/TR/css3-background/#the-background-size:
If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as ‘auto’ as described above. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for ‘contain’.
However, it doesn't play out that way so maybe I'm missing something.
I think that this is what your a re asking for
demo
The HTML is
<div class="clientlist">
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
<div class="client"><div class="client4"></div></div>
<div class="client"><div class="client5"></div></div>
<div class="push"></div>
</div>
And The CSS is
body, html {
height: 100%;
}
.clientlist {
text-align: justify;
display: inline-block;
width: 100%;
}
.clientlist .client {
width: 18%;
height: 90px;
max-width: 200px;
display: inline-block;
}
.clientlist .client div {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.push {
display: inline-block;
width: 100%;
height: 0px;
}
.client1 { background-image: url(http://placekitten.com/200/300); }
.client2 { background-image: url(http://placekitten.com/200/200); }
.client3 { background-image: url(http://placekitten.com/200/180); }
.client4 { background-image: url(http://placekitten.com/220/200); }
.client5 { background-image: url(http://placekitten.com/180/200); }
I am setting the max-width on the div, and not really in the background size; but I think that the result is the intended one.
To make the div space evenly, I use a trick using text-align: justify. For this to work; I need an extra element in the HTML that is the "push" class.
I have used a background image on the webpage and used this code in the css which makes it nicely resize when browser is resized.
body{
background: url("images/back.jpg") no-repeat ;
background-size: cover;
}
I need to place some other image on top of the background image at a specific place ( vase on table) .but when i do that then the background gets resized but the vase image remains in the same place and same size when browser is resized as shown in second picture below.
see the vase in these two images
browser in full size
resized browser
how can i make the vase image also get resized just like the background
I recently ran into exactly the same issue creating a hidden object game which needed images placed on top of a background image to maintain their position regardless of browser dimensions.
Here's what I did:
You can include a template version of the background image as an actual <img> with visibility:hidden (so it's not visible but still takes up it's space in the DOM and base the size (and background image size) based on that.
HTML:
<div class="image-container">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
<div class="item"></div>
</div>
CSS:
/* This is your container with the background image */
.image-container {
background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
background-size:100%;
overflow-x: hidden;
position:relative;
}
/* This is the template that resizes the DIV based on background image size */
img.img-template {
visibility: hidden;
width:100%;
height:auto;
}
/* This is the item you want to place (plant pot) */
.item {
position: absolute;
left: 14.6%;
bottom: 80.3%;
width: 15%;
height: 15%;
background: yellow;
border: 2px solid black;
}
Here is a working example: http://jsfiddle.net/cfjbF/3/
Try making the image relative position and setting the alignment manually.
http://jsfiddle.net/cfjbF/1/
<head>
<style>
body {
background: #000000;
}
#image1 {
background: #008000;
position: relative;
left: 50px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="image1"></div>
</body>
Solution for your Problem:
https://stackoverflow.com/a/7660978/1256403
OR
http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
I have an image, the top 80px of which I want to use for some other purpose, and remaining image, I want to set as a full page background image.
I tried setting:
background-position: 0px -80px
but it does not work.
How to properly use css sprite (background position) and full page background image?
Either of these (link or link) will generate a sprite for you and the corresponding css.
Once you have that completed use the css classes for their corresponding areas like:
.image1Background {
background-image: url("thesprite.png"),
left: -80px;
top: 0px;
}
.image2Background {
background-image: url("thesprite.png"),
left: 0px;
top: 0px;
}
<body class="image1Background">
<div class="image2Background">
</div>
</body>
Sprites are generally used for a lot of little icons to reduce the number of requests needed to download them to the client.
i would use a div for the 80px image and the background img as body background.. something like:
body { background-image: url(background.gif) }
#imgtop { height: 100%; width: 100%; background-image: url(80px_image.gif) }
I have a site design that uses background images and textures as a feature of the site.
See background design concept here: http://www.flickr.com/photos/54233587#N03/6145240784/in/photostream
The background is intended to work like this:
The page background has a tiled pattern (or on some pages there will be solid background colour).
The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position - that is, it should move with the page if it is scrolled.
All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.
I have tried to achieve this by targeting the HTML5 html node for the tiled background.
html {
background: url(../img/pegboard.jpg) repeat center;
}
Then, for the overlaying background image I've been using a div element to insert an image.
<div id="bgimage"><img src="mybgimage.jpb"></div>
Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.
Thanks.
I would do something like this.
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}