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/
Related
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>
I have the following snippet for the image container:
<div class="image-container">
<img src="/images/xyz.jpg">
</div>
.image-container {
width:415px;
height:552px;
}
The div's size is fixed and can't be changed. Images can be different sizes. At this moment, I have the following style for the image:
width:100%;
height: auto;
This may show a lot of empty space within the container for most images because their sizes do not math the 415/552 ratio.
Now I need to make images cover the whole div space. If I make the image the background of the container, this is what I would do:
.image-container {
width:415px;
height:552px;
background: url("/images/xyz.jpg") no-repeat center center / cover;
}
However, the images can't be background images due to a few reasons. How can I use CSS to enlarge images to achieve the same results as if they were used as background images through the above CSS. When enlarged, the image shouldn't be distorted.
Because you have a fixed width and height on your containing div, you can use absolute positioning on the image to make it take up the full height and width, for example:
.image-container {
position: relative;
width:415px;
height:552px;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Edit: The above css worked after some changes. See fiddle: https://jsfiddle.net/rezvj2uw/1/ for an example
Try with:
.image-container {
width:415px;
height:552px;
background-image: url("/images/xyz.jpg");
background-size: 100% 100%;
}
Jsfiddle:
https://jsfiddle.net/MartinGK/0odgxjh3/3/
Jsfiddle second solution:
https://jsfiddle.net/MartinGK/0odgxjh3/9/
other solution:
https://jsfiddle.net/MartinGK/0odgxjh3/12/
I'm renewing a webpage of a book publisher who has their books online. They have it in jpg but I'm migrating it to SVG. I'm doing a test of the book viewer and the only way I found to contain the SVG image to the container size was to make it a background image. It works perfectly in Chrome, but I'm having problems with Safari for Desktop and Mobile also. Both of them shows up the SVG image but they miss an essential part of it.
I uploaded it for you to see what I'm talking about:
http://www.edicionesbabilonia.com/svg.html
I attach the code I've been using:
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<html>
<head>
<style type="text/css">
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.divsvg {
border: 1px solid #999;
height: 100%; /* collapse the container's height */
width: 50%; /* specify any width you want (a percentage value, basically) */
/* apply a padding using the following formula */
/* this formula makes sure the aspect ratio of the container equals that of the svg graphic */ /* create positioning context for svg */
background-image: url(pv-58.svg);
background-size: contain;
background-repeat: no-repeat;
}
#left {
float: left;
background-position: right center;
}
#right {
margin-left: 50%;
background-position: left center;
}
</style>
</head>
<body>
<div class="divsvg" id="left">
</div>
<div class="divsvg" id="right">
</div>
</body>
</html>
Apparently there is a bug on Webkit that needs to load it as an object. It is possible to load it as an object and hidden it...
I've got the answer from: SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser
I need to display an image (and may be some controls near it) at the center (both horizontally and vertically) of the window, while being shrinked to screen height when happens to be bigger (all the images I have are vertical so I don't care about their width).
The underlying content must be hidden with the background.
Code should work in browsers starting from Internet Explorer 8.
I managed to acheive everything but the latter - shrinking to screen height, which I am having problems with.
Here is how I tried to implement it (put in clauses with a resulting code below):
I put everything in a block with fixed positioning and setting 100% to it's width and height - for it to fill the whole window area. Successful.
I use table to center the image vertically, wherefore I set it's height to 100%. Successful.
Inside of the cell I place an image.
3a. When it's height is less then screen size the image is positioned at the center vertically. Successful.
3b. I set max-height to 100% for the image to make it fit into the screen. Unsucsessful! Image pushes the window apart to it's actual height (except of, surprisingly, IE).
Is it possible to solve the task described and what did I do wrong?
(my code:)
view at jsfiddle
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="photoshow">
<table>
<tr>
<td>
<img src="http://s14.postimg.org/e9kwvq2m9/1031_1.jpg">
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
.photoshow { /* the containing block */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: pink; /* hiding the underlying content */
}
.photoshow table {
height: 100%;
margin-left: auto; margin-right: auto; /* to center horizontally */
}
.photoshow td {
height: 100%;
vertical-align: middle;
background: yellow; /* just for visual indication */
}
.photoshow img {
max-height: 100%;
}
DEMO
.photoshow .big {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:100%;
max-height:300px;
}
I'm trying to build a webpage with 3 columns. The one in the middle (centered) needs to have fixed width (1000px) and the other 2 with no specific width. When the user resizes the window only the left one and the right one should be resized. Is this possible?
Regards
Yes this is possible
You should create one maindiv in your css and set the background to repeat in your body like shown below and give it a background color/gradient/whatever you like. I usually use a 1px width gradient picture.
Setting the same background color and image in your div as in your body will help you keep an even background depending on your design (i.e. You have a design that has a margin at the bottom of 20px to create a clear space, then the background will follow through instead of showing white)
STYLESHEET.CSS
body {
margin: 0px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-color: #03255d;
background-image: url(../img/bg_gradient.gif);
}
#MainDiv {
position: absolute;
width: 1000px; /* width of middle column */
z-index: 1;
top: 0%;
left: 50%;
margin-left: -500px; /* should be half and minus of width to center it */
background-color: #03255d; /* set background color same as body */
background-image: url(../img/bg_gradient.gif); /* set background image same as body */
}
Now in your HTML after the body tag you start with your MainDiv and before the body end tag you close the MainDiv
INDEX.HTML
<body>
<div id="MainDiv">
Your HTML here
</div>
</body>
Now when you resize your browser, it resizes the background and your middle column stays centered