The white part is a container div centered horizontally on the website. The stripes are the background image of the body element. I have the rest of the dumbbell as a picture and I want to place it outside of the container so that there's a complete picture.
Usually it would be positioning the image absolutely in the container div and moving it a bit to the right.
But my problem is that the background of the whole image is white. So the result is:
Is there a way to solve this?
<body>
<div id="container">
<div id="pimg"><img src="../images/image_part.png"></div>
</div>
</body>
html {
background-image: url('../images/stripes.png');
}
#container {
position: relative;
background-color: white;
background-image: url('../images/image.png'); // first picture
background-repeat: no-repeat;
background-position: top right;
width: 800px;
height: 90%;
margin: 0 auto;
}
#pimg {
position: absolute;
top: 0;
right: -100px; // second image
}
You can set the following css to hide the part of the image that goes outsite the div#container
#container
{
overflow:hidden;
}
The above approach will crop the image, and if you don't want to do that you could set this so that the image has maximum width the one of it's container
#pimg
{ width:800px; }
#pimg img
{ max-width:100%; }
The main problem is that your PNG has a white background instead a transparent background like you want so:
Edit "image.png" in an image editor software like Adobe Photoshop or GIMP
Open it in the image editor
Erease the background (because you have a PNG, yes, but it has a white background)
Save the image in PNG or GIF format, because JPEG doesn't support transparent backgrounds
Tip: Photoshop have an option to save a picture for the web, Control(Command in Mac) + Shift + alt + S, this option can help you to optimize the image adjusting its params
Here's a Photoshop tutorial: http://www.youtube.com/watch?v=PLA2FaOXkkg
Related
I need to figure out how to overlay an image of my logo on top of another repeating image that is being used as a background for the nag bar at the top of my site.
The CSS for the nag bar image looks like this:
.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;
is there a way to add another image on top of this and have it aligned to the left side of the underlying image?
Something like this?
http://jsfiddle.net/aJEwZ/
<style>
.nav {
background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
height: 250px;
width: 500px;
border:1px solid black;
}
img {
padding:20px;
}
</style>
<div class='nav'>
<img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
hello</div>
Here you go.
here's a DEMO
and here's the CODE
Here's the css
.header {
background: url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
background-size: 571px 125px, auto;
height:125px;
width: 100%;
}
notice how the background attribute has two shorthand backgrounds with images written out seperated by a comma. The first image is on top of the second image and so on.
The first property of attribute background-size only applies to the first property in the background attribute (the first image in the declared background attribute.) The second applies to the second image in the background attribute.
This works the same way with other background-properties such as background-repeat, and background-image.
Here's an article on having multiple background images:
http://www.css3.info/preview/multiple-backgrounds/
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 need to make white stripes on an image Like this on header image there are children's and there is some white stripe. same white stripes can be show on below sustainability report image.Although they are using image which had these stripes. Any idea how it can be implement in css or css3 with any image.
This or some variant of it ought to work:
HTML:
<div class="image"><img src="whatever-you-like.gif"><div></div></div>
CSS:
.image { position: relative; }
.image div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(stripes.png); }
Stripes.png must be a 24-bit PNG image with a low alpha value.
Note that in this implementation you don't have to use your original image as a CSS background, you can use the image tag as normal (just with some extra HTML around it).
You can use your original image as a background, and on top of it use .png image with these stipes and transparency.
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;
}
I want to show a photo in my page, the DIV layer is 500 * 500px. I will replace the picture very often, the picture size is not sure, may be horizontal version may be vertical version, maybe 800*600px maybe 576*720px.
I don't want to get the photo deformation. How to set CSS or JS, make the photo show only the center 500 * 500 px, hide the around part.
Use a background image on a DIV with pre-defined dimensions, and set the image position to 50%, which essentially centers it. Whatever overflows the 500x500 will be cropped...
#yourImageDiv {
background: url(../img/image.jpg) no-repeat 50%;
height: 500px;
width: 500px;
}
One nice trick is to use a transparent PNG instead of a div and apply a background-image style to it. That way you get to use the image as you normally would (inline, etc.) but can crop at will.
#cropper {
width: 500px;
height: 500px;
background-image: url(myBackgroundImage.png);
background-repeat: no-repeat;
background-position: center center;
}
...
<img id="cropper" src="clear.png">