CODEWITHSUNDEEP
htmlcss
Kevin
Kevin

Reputation: 862

Page image border using CSS

I am having struggles with implementing a page-border using images on my page. The border is supposed to stick to the sides of my webpage, but the images are not showing. Replacing the images by a solid background color does however work. I am using the code below:

#top, #bottom, #left, #right {
  position: fixed;
}
#left, #right {
  top: 0; bottom: 0;
  width: 15px;
}
#left { 
  left: 0;
  background-image: url("border-left.png");
}
#right {
  right: 0;
  background-image: url("border-right.png");
}

#top, #bottom {
  left: 0; right: 0;
  height: 15px;
}
#top {
  top: 0;
  background-image: url("border-top.png");
}
#bottom {
  bottom: 0;
  background-image: url("border-bottom.png");
}

@media 
only screen and (max-width: 500px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) 

{
  #top, #bottom, #left, #right { display: none; }
}

As I said, replacing background-image: url("border-left.png"); with ``background: #000; works just fine.

Anyone got an idea on fixing the issue where the images are not properly displayed?

As for the HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

<!-- Borders -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>


<div id="wrapper" class="toggled">


    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <p>Content</p>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

</body>

</html>

The top and left image are shown (however not properly) and the bottom and right image are left out completely.

Upvotes: 1

Views: 64

Answers (1)

Andy G
Andy G

Reputation: 19367

Using the browser's developer tools will reveal that the elements (#right, etc.) have either no height or no width. These need to be configured so that the element's backgrounds will show.

For example, a block-level element, such as a div, will by default stretch across the browser-width but, without any content, will have zero height.

Upvotes: 1

Related Questions