Changing CSS image links to HTML?

HTML & CSS
1

Hi Guys,

OK, I know this is so easy for you guys, but I’m not a coder but have used adobe reflow to create some HTML/CSS. When I exported the code, it placed the image links into the CSS instead of the HTML. Can some kind person tell me what code I would need to have the image link in the HTML instead of the CSS, with the button loading on top. I’ve tried doing myself, I get the image to load, but the button doesn’t show as expected

Thanks for any help. I’m a designer with a little code experience.

HTML

  <div id="image-square">
       <a class="default-button" href="#">Button Name</a>
  </div>

CSS

#image-square {
    float: left;
    width: 500px;
    height: 500px;
    position: relative;
    top: 0px;
    left: 0px;
    background-image:url("http://www.website.com/images/image-square-01.jpg");
    -webkit-background-size: 100%;
    background-size: 100%;
}
.default-button {
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,1);
    font-family: "fonts here";
    font-size: 13px;
    position: absolute;
    padding: 2px 6px;
    bottom: 15px;
    right: 15px;
    border: 1px solid rgba(255,255,255,1);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.default-button:hover{
    background:rgba(0,0,0,0.5);
}
1 Like
2

The html like this should do it:

  <div id="image-square">
    <img src="http://www.website.com/images/image-square-01.jpg" alt="Button Image" width="500" height="500">
       <a class="default-button" href="#">Button Name</a>
  </div>

And remove the lines about background for #image-square in the css.

1 Like
3

Thanks SamA74, is there any way to keep the width/height in the CSS? or it’s needed in the HTML?

4

Yes, just leave it in the css, I did not say to remove that.
Having it in the html is not necessary, but good practice, as it helps the browser to render the page layout properly before the image loads. Also the image size settings can be overridden by the css regardless of what the html says it is. So if you make the page responsive, the css can take care of the image size.

1 Like
5

Perfect thanks Sam! I will let you know how it goes.

6

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