How would I replace an image with a style here?

HTML & CSS
1

This is the style I want to replace the image with, how do I do it?

<div style="width: 50px; height: 50px; background-color:#00a0b0; "></div>

<style> #holder { background:url(http://i.imgur.com/tBpEMnQ.png) no-repeat center; height:300px; width:330px; border: 3px solid red; } </style> <div id="holder">

2

Please restate your phrasement. It seems confused.

1 Like
3

I want to remove this:

background:url(http://i.imgur.com/tBpEMnQ.png

and add, put this instead:

width: 50px; height: 50px; background-color:#00a0b0;
4

I want to replace the green rectangle with the square box which isn’t an img.

1 Like
5

This works.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>centered box</title>
<!--

-->
    <style type="text/css">
#holder {
    width:330px;
    height:300px;
    border:3px solid red;
    position:relative;
}

.hvcentered {
    width:50px;
    height:50px;
    background-color:#00a0b0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

    </style>
</head>
<body>

<div id="holder">
    <div class="hvcentered"></div>
</div>

</body>
</html>

This is similar to the above method:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>centered box</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-replace-an-image-with-a-style-here/236172
asasass
-->
    <style type="text/css">
#holder {
    width:330px;
    height:300px;
    border:3px solid red;
    position:relative;
}

.hvcentered {
    width:50px;
    height:50px;
    background-color:#00a0b0;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25px;
    margin-left:-25px;
}
    </style>
</head>
<body>

<div id="holder">
    <div class="hvcentered"></div>
</div>

</body>
</html>

This one adds a <span> since you cannot use pseudo-elements inline:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>centered box</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-replace-an-image-with-a-style-here/236172
asasass
-->
    <style type="text/css">
#holder {
    width:330px;
    height:300px;
    border:3px solid red;
    display:table;
}

.hvcentered {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
span {
    display:inline-block;
    vertical-align:top;
    width:50px;
    height:50px;
    background-color:#00a0b0;
}
    </style>
</head>
<body>

<div id="holder">
    <div class="hvcentered"><span></span></div>
</div>

</body>
</html>

Take you pick.

If the goalposts change, I’m out on a disability. :urn:

3 Likes
6

wow, 3 different ways of doing it. cool. thanks!

I like the 1st one.

1 Like
7

Then we have the “flex” centring variant.
https://www.w3.org/Style/Examples/007/center.en.html

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.