The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Using image as an HR
Terminator
post Dec 3 2015, 05:30 PM
Post #1


Advanced Member
****

Group: Members
Posts: 218
Joined: 19-March 15
Member No.: 22,398



I have to use an image as an HR for a class project, but I cant get it to work.

Cant I just style it like this?

CODE

hr {
     background: url(img/hr.png) repeat-x;
    clear: both;
}


I am using this as an inline style for the page, but it does not display any image. The image code is right, and in correct folder but does not show up.

Don't I just put it on the HTML like below? I also tried making this as a DIV but that did not work

CODE

<hr />
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2015, 08:46 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Terminator @ Dec 3 2015, 11:30 PM) *

I have to use an image as an HR for a class project

Maybe they simply meant an IMG element that looks like a horizontal rule? But then it's not the same thing as a HR, semantically speaking:
"The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book."
http://www.w3.org/TR/2014/REC-html5-201410...#the-hr-element



QUOTE
Cant I just style it like this?

Maybe the HR needs a little height also, so the image shows up inside it? Normally it's just the HR border you see, with no space for the image in between.

This post has been edited by Christian J: Dec 4 2015, 07:52 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 04:22 AM