Last post Apr 02, 2016 10:08 PM by muybn
Mar 31, 2016 07:11 AM|muybn|LINK
On the site www.marketingtechblog.com/css-image-map, they have this CSS:
/* background image block */
background: url(images/options.png) no-repeat;
I tried to do something similar but I couldn't get my background image to show:
for this HTML:
<div class="row" id="header">
Any clues as to why the image won't display?
Mar 31, 2016 08:03 AM|mybhavsar9|LINK
you need to try like this.
Apr 02, 2016 07:06 AM|muybn|LINK
Thank you, Malvik. Unfortunately, neither of your suggestions worked for me. Those are both adequate for an image tag but apparently not for styling.
Apr 02, 2016 10:08 PM|muybn|LINK
This did it:
<div class="container table-responsive">
width: auto; /*this is the important part for getting the image consistenly centered no matter the screen size*/
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
The "min-height" property ("height" worked also) was the key; I don't know why it wouldn't work without it.
Would be nice if there were a completely consistent way of referencing images throughout code and CSS. Kind of confusing the way it is.
BTW, two dots before the slash works with CSS also (so I marked Malvik's response as an answer); and the single-quotes are optional.