CODEWITHSUNDEEP
htmlcssimageoverlayabsolute
kinder
kinder

Reputation: 3

How to fix an image over the div?

http://estreetusa.us/piechart/ i want to fix the center image, i.e 24 hours written on it, please suggesst. back is css for background-image and fish is css for overlaid image .. relative;

Thanks in advance!!

Upvotes: 0

Views: 479

Answers (5)

Meenakshi
Meenakshi

Reputation: 175

Add this rule in your css file: 

.fish{
    margin-left:3.5%;
}

Upvotes: 0

Milind
Milind

Reputation: 457

use this css for your current HTML.

background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
top: -300px;

for the above css top margin have to adjust for device specific

to make image perfectly in center you have to nested the image into the canvas and then apply below css

background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;

Upvotes: 0

Vahid Msm
Vahid Msm

Reputation: 1082

Change your fish class to this:

.fish {
   background-image: url(24.png);
   width: 196px;
   height: 196px;
   position: relative;
   margin: -295px auto;
   right: 15px;
}

Upvotes: 1

cpalinckx
cpalinckx

Reputation: 369

You have multiple options in this case.

You can set left to 50% and then center it by setting the margin-left to -98px (half the elements width). Don't forget to give it's parent position: relative;

.fish {
    background-image: url("24.png");
    width: 196px;
    height: 196px;
    position: absolute;
    top: 426px;
    left: 50%;
    margin-left: -98px;
}

OR you can put 24.png in a img element and set it's display to inline or inline-block. Then you give the parent text-align: center.

If the content above the clock doesnt change (in height), I would go for the first option. Otherwise go for the second.

Good luck :)

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Firt add position: relativeto the section element that contains both elements,

Then put the fish DIV inside the back DIV (making fish's position depend on back) and alter the top and left settings accordingly (approximat setting: top: 96px; left: 471px;)

Upvotes: 0

Related Questions