WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » CSS Image Overlay

View previous topic View next topic Go down  Message [Page 1 of 1]

1CSS Image Overlay Empty CSS Image Overlay Fri Mar 05, 2010 4:30 am

Reave

Reave
Registered Member
Registered Member
Im creating my brother a design website potfolio for his graphics and I am trying to figure out how to do an image overlay with the css. I have seen this on other sites, but I dont know how to do this. See pictures below of what I am talking about. Any help is appreciated, Thanks.

Overlay image that always stays on top and in css.
CSS Image Overlay Icsppk

I want this image behind the overlay image and the url's stay in the html page so it can be changed with different pictures to show different work.
CSS Image Overlay Dxyfj5

This is what the results should look like
CSS Image Overlay 2mrwgv4

http://ectos.darkbb.com/

2CSS Image Overlay Empty Re: CSS Image Overlay Fri Mar 05, 2010 12:08 pm

Sanket

Sanket
Administrator
Administrator
Code:
<style type="text/css">
          .xyz {
              background: url('http://i49.tinypic.com/icsppk.png') ;
              width: 171px;
              height: 107px;             
          }         
      </style>
   <body>   
            <img class="xyz" src="http://i47.tinypic.com/2up63gp.png" />    <img class="xyz" src="http://i47.tinypic.com/2up63gp.png" />       
   </body>

Now here, i had to make the image https://2img.net/h/oi45.tinypic.com/dxyfj5.png have a transparent area around it. https://2img.net/h/oi47.tinypic.com/2up63gp.png (Drag on the image to see the background area.

So that transparent area should be generally matching the border area.
Then you can make the border image as your background in your css. Then go on adding as many image as required with the transparent space.

Hope you understood what i wanted to say.

http://www.webartzforum.com

3CSS Image Overlay Empty Re: CSS Image Overlay Fri Mar 05, 2010 1:03 pm

Reave

Reave
Registered Member
Registered Member
hmm... it works the oposite that I want it to work. The image boarder is still in the background that is in the css. There has to be a way to make the the picture boarder in the css overlay on top of the other picture in the html.

http://ectos.darkbb.com/

4CSS Image Overlay Empty Re: CSS Image Overlay Fri Mar 05, 2010 1:27 pm

ankillien

ankillien
Administrator
Administrator
Hi,

Actually, there is no way in CSS to make the background overlay an element.
To make this, either you have to increase background image size or decrease main image size.

Try this code...

Code:
<html>
<head>
<title>WebArtz</title>
<style>
body {
 margin : 50px;
 background : ;
}
.pic {
 padding : 8px;
 background : url(icsppk.png) no-repeat 0px 0px;
 width : 200px;
 height : 200px;
}
.pic img {
 width : 155px;
 height : 90px;
}
</style>
</head>

<body>

<div class="pic">
<img src="dxyfj5.png" />
</div>

</body>
</html>

5CSS Image Overlay Empty Re: CSS Image Overlay Sat Mar 06, 2010 3:58 am

Reave

Reave
Registered Member
Registered Member
Thanks for input and help (Sanket and ankillien) I ended up using Sankets idea. I just have to update the pictures through the css. Well, I guess its solved, thanks again.

CSS
Code:
.B1 { background: url(Mimages/BDLogo.png); width: 171px; height: 107px;}
.B2 { background: url(Mimages/BDLogo.png); width: 171px; height: 107px;}
.B3 { background: url(Mimages/BDLogo.png); width: 171px; height: 107px;}
.B4 { background: url(Mimages/BDLogo.png); width: 171px; height: 107px;}

HTML
Code:
<img class="B1" src="Mimages/BDOverlay.png" alt="picture" width="171" height="107" />
<img class="B2" src="Mimages/BDOverlay.png" alt="picture" width="171" height="107" />
<img class="B3" src="Mimages/BDOverlay.png" alt="picture" width="171" height="107" />
<img class="B4" src="Mimages/BDOverlay.png" alt="picture" width="171" height="107" />

http://ectos.darkbb.com/

6CSS Image Overlay Empty Re: CSS Image Overlay Sat Mar 06, 2010 11:02 am

Sanket

Sanket
Administrator
Administrator
Okay just for my information. Why is the same thing repeated 4 times?

Also, you had a transparent area around the 2nd image coinciding with border of the 1st image?

http://www.webartzforum.com

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » CSS Image Overlay

Permissions in this forum:
You cannot reply to topics in this forum