Correct css / html for image overlapping header. |
Correct css / html for image overlapping header. |
JUI43555 |
Jul 4 2023, 11:45 PM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hoping to get some advice on best practice for having an image overlapping or 'sticking out' of an element like the image below.
If there is a name of this type of thing please let me know. https://picsum.photos/300 (if you need a placeholder) Thanks. |
coothead |
Jul 5 2023, 05:42 AM
Post
#2
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there JUI43555,
coothead |
JUI43555 |
Jul 5 2023, 07:32 AM
Post
#3
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
|
Christian J |
Jul 5 2023, 07:37 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
Hoping to get some advice on best practice for having an image overlapping or 'sticking out' of an element like the image below. Does the image stick out of (or into) the green area? What other content is there on the page, especially above and below the image (and maybe on its sides)? The important thing is that the image doesn't obscure such other content... |
JUI43555 |
Jul 5 2023, 08:03 AM
Post
#5
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
my bad, i meant best css practice. essentially i'm looking to tackle this.
working out how to get the css to make the phone over the top like that. Presuming it was a z-index with some sort of minus value margin etc. Then it would give me a better idea as to how to accomplish this overlap. |
coothead |
Jul 5 2023, 08:57 AM
Post
#6
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
my bad, i meant best css practice. essentially I'm looking to tackle this.
coothead |
Christian J |
Jul 5 2023, 12:01 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,667 Joined: 10-August 06 Member No.: 7 |
my bad, i meant best css practice. essentially i'm looking to tackle this. The blue curve might be done with CSS3 border-radius. If the phone is in a IMG element, you call pull it up from below with a negative top margin, in front of the blue curve: CODE #top { border-bottom: 100px solid blue; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } #bottom { text-align: center; margin-top: -50px; } <div id="top"></div> <div id="bottom"><img src="dog.jpg" width="300" height="200" alt=""> </div> Or you could use a background image for the blue curve, with another background image or an IMG element for the phone. Or you could combine the phone and blue curve into a single image. The curve radius may change depending on viewport width, not sure how to best avoid that. QUOTE Then it would give me a better idea as to how to accomplish this overlap. The circle image could be a background image too. |
Lo-Fi Version | Time is now: 21st May 2024 - 11:58 AM |