How to make picture frame in css

HTML & CSS
1

question-image
question-image838Ă—666 77.9 KB

Hi,
I want to create this image in html and css but I am newbie in this so I am confused.

The html structure that I am using right now is:

<div id="center">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
<./div>
</div><!--center div closed -->

Now the header has the header background image in css, content has center background image and footer has footer background image but it doesnt works as expected.

Please help and advise.

Thanks
ST

2

I assume when you say you want to “create this image” you mean you want to create an actual box, not the broken one in the image.

#1: Consider doing it without an image for the top/sides. A shadow box on a div can achieve much of this effect without needing images.
#2: If you are going to do it with images, fix your widths.

3

Hi,
Thanks Please I want to do this with the images only.
Any guidance or help.

Thanks

4

This is the perfect example of where flex (or grid) can easily be leveraged to do what you want…Here is a quick and dirty flex example.

1 Like
5

One change needed :slight_smile:
This:

height: calc(100vh - 2rem);

Should be this:

min-height: calc(100vh - 2rem);

Or the text will overflow :wink:

6

Showoff! I did say it was a quick and dirty example… :lol:

Fixed…

2 Likes
7

Hello Dave,
Thanks this is helpful to me as html/css is something new to me. I am trying it out.

Thanks
ST

1 Like