Web page w full bg image and white text container

HTML & CSS
1

I’m making a website and I want to use a full page cover background and a white container for content. I thought I had the correct CSS and HTML for it. It doesn’t appear the way I wanted. Can you help me please fix it?

Here is the test page

body {
  color: #036;
  font-family: Georgia;
  font-size: 20px
}

.masthead img {
  width: 100%;
  height: 100%;
  background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat fixed center;
  background-size: cover
}

.navbar-custom {
  background-color: #0D5EAF
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  text-decoration: none;
  color: #fff
}

a.navbar-brand:link,
a.navbar-brand:visited {
  color: #0D5EAF;
  text-decoration: none;
  background-color: #fff;
  border-radius: 50%;
  padding: .5rem
}

a.navbar-brand:hover,
a.navbar-brand:focus {
  color: red;
  text-decoration: none
}

.navbar-custom .navbar-nav .nav-link {
  text-decoration: none;
  color: #fff
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom {
  text-decoration: none;
  color: #fff
}

.nav-item .nav-link:hover {
  color: #0D5EAF;
  background-color: #fff;
  border-radius: .25rem
}

.navbar-custom .dropdown-menu {
  background-color: #0D5EAF
}

.navbar-custom .dropdown-item {
  text-decoration: none;
  color: #fff
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
  text-decoration: none;
  color: #0D5EAF;
  background-color: #fff
}

@media (max-width:767px) {
  nav.navbar {
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }
}

.navbar-toggler {
  border-color: rgb(255, 255, 255)
}

.navbar-toggler-icon {
  color: #fff
}

.navbar-toggler-icon:hover {
  background: #fff
}

span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

@media (max-width:767px) {
  nav.navbar {
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }
}

#bg {
  background: url(../images/bg.jpg);
  background-size: cover;
  background: no-repeat center center fixed
}

a {
  color: #036;
  text-decoration: none
}

a:hover,
a:focus {
  color: red;
  text-decoration: underline
}

a {
  color: #036;
  text-decoration: underline;
  a:hover {
    color: red;
    text-decoration: underline
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #036
}

.icon-background {
  color: #fff
}

.fa-facebook {
  color: #3b5998;
  font-size: 20px
}

.fa-facebook:hover {
  color: #8b9dc3
}

.fa-envelope {
  color: #9ACD32;
  font-size: 20px
}

.fa-envelope:hover {
  color: #FF8686
}

.fa-phone {
  color: red;
  font-size: 20px
}

.fa-phone:hover {
  color: #8b9dc3
}

.fa-arrow-circle-o-down {
  color: #fff;
  font-size: 20px
}

.img-fixed {
  padding-bottom: 5px
}

#myFrame {
  width: 100%;
  height: 1000px
}

.carousel-item .img-fluid {
  width: 90%;
  height: auto
}

.carousel-item a {
  display: block;
  width: 100%;
  height: auto
}

.carousel-control-prev {
  color: background-color:#3F0;
  margin-left: -2rem;
  z-index: 10;
  text-decoration: none
}

.carousel-control-next {
  color: background-color:#3F0;
  ;
  margin-right: -2rem;
  z-index: 10;
  text-decoration: none
}

.carousel-controls a:hover {
  color: 004289;
  z-index: 10;
  text-decoration: none
}

.carousel-control-prev:hover {
  color: #458B00;
  text-decoration: none
}

.carousel-control-next:hover {
  color: #458B00;
  text-decoration: none
}

.embed-responsive {
  width: 90%;
  height: auto
}

.footer {
  width: 100%;
  font-size: 1.25rem;
  margin-top: 1rem;
  text-align: center;
  overflow: visible;
  color: #fff;
  height: 2rem;
  background-color: #0D5EAF
}

.footer {
  width: 100%;
  font-size: 1.25rem;
  margin-top: 1rem;
  text-align: center;
  overflow: visible;
  color: #fff;
  height: 2rem;
  background-color: #0D5EAF
}

.footer .container {
  background-color: #0D5EAF
}

#scroll {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #3F0;
  text-indent: -9999px;
  display: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: .75
}

#scroll span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-bottom-color: #fff
}

#scroll:hover {
  background-color: #3C0;
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WentworthCC.com brought to you by Samonas Realty</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="css/custombs4-n.css" rel="stylesheet">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">
</head>

<body>
  <header class="masthead"><img src="images/Banner.jpg" id="Banner" alt="WentworthCC Logo"></header>
  <nav class="navbar navbar-custom navbar-expand-md"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbar-custom" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse"
      id="navbarCollapse"></div>
  </nav>

  <div class="container" id="bg"><a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Scroll To Top<span></span></a>
    <h1 class="mx-auto">Page content </h1>
    <p>Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." What is Lorem Ipsum?</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?</p>

    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
  <div class="clearfix"></div>
  </div>
  </div>
  <footer class="footer">
    <div class="container">
      <div class="text-center">Copyright &copy;
        <script>
          document.write(new Date().getFullYear());
        </script> Footer</div>
    </div>
  </footer>
  <script defer src="https://kit.fontawesome.com/593a9d194e.js"></script>
  <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
          $('#scroll').fadeIn();
        } else {
          $('#scroll').fadeOut();
        }
      });
      $('#scroll').click(function() {
        $("html, body").animate({
          scrollTop: 0
        }, 600);
        return false;
      });
    });
  </script>
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>
2

Try this:

body,
.masthead  {
  /* width: 100%; height: 100%; */
  background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat fixed center;
  background-size: cover
}
.masthead img {
  width:100%; height:180px; max-height:200px; height:auto; 
}

/* EDIT: I forgot the container color */
.container {
  background-color: snow; 
  border-radius: 0.88em;
  margin: 1.2em auto;
}

/*
#bg {
  background: url(http://cutecondo.com/images/bg.jpg);
  background-size: cover;
  background: no-repeat center center fixed
}
*/

**Edit: **
Validate the page:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fcutecondo.com%2Ftest.html

3

it didn’t work, it still looks the same

4

We don’t really know what it should look like but you have an error here.

#bg {
  background: url(http://cutecondo.com/images/bg.jpg);
  background-size: cover;
  background: no-repeat center center fixed
}

It should be:

#bg {
  background: url(http://cutecondo.com/images/bg.jpg) no-repeat center fixed;
  background-size: cover;
}

Of course it won’t stretch edge to edge because you have it inside a container that has a width applied depending on the media query. If you want it edge to edge then it will nee to be applied to a full width parent of your content.

You also have some other odd things going on such as applying a background image to your image which means you will never see the background because the image will cover it up.

.masthead img {
  width: 100%;
  height: 100%;
  background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat fixed center;
  background-size: cover
}

That is nonsense but I’m not sure what you were attempting to do ?

Then you should probably be applying the image to the body element but its hard to give advice without knowing what the intended concept is supposed to look like.

3 Likes
5

Try this:

2 Likes
6

thank you for your help

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.