Menu icon Foundation
Background image not appearing

Hi,

I am trying to add a background image to a top bar menu. So far I've tried adding via the top-bar class itself, and by attaching a class 'backa' to the ul. I've tried setting height, setting 100% width, adding !important; to the overriding css and still the background image doesn't appear. Any ideas why this is happening ? Thanks

HTML:

<body>
<div class="top-bar">
 <ul class="backa">
    <li><a href="#">Menus</a></li>
    <li><a href="#">Special Offers</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Rooms</a></li>
    <li class="hsmenu"><a href="#">Rooms</a></li>
  </ul>
</div>

<script type="text/javascript" src="JS/vendor/jquery.js"></script>
<script type="text/javascript" src="JS/vendor/foundation.js"></script>

</body>

 

CSS:

@charset "utf-8";
/* CSS Document */

.top-bar {
	padding:1rem;
	text-decoration: none;
}

.top-bar li {
    float: left;
	margin-top:-20px;
	padding-right:3rem;
	text-decoration: none;
	list-style-type: none;
}

a {
	text-decoration:none;
}

backa {
	 background: url("Images/Menubac.jpg")!important;
	 no-repeat center center fixed;
	 width: 100%!important;
	 height: 80px!important;
}

csstop barmenubackground Image

Hi,

I am trying to add a background image to a top bar menu. So far I've tried adding via the top-bar class itself, and by attaching a class 'backa' to the ul. I've tried setting height, setting 100% width, adding !important; to the overriding css and still the background image doesn't appear. Any ideas why this is happening ? Thanks

HTML:

<body>
<div class="top-bar">
 <ul class="backa">
    <li><a href="#">Menus</a></li>
    <li><a href="#">Special Offers</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Rooms</a></li>
    <li class="hsmenu"><a href="#">Rooms</a></li>
  </ul>
</div>

<script type="text/javascript" src="JS/vendor/jquery.js"></script>
<script type="text/javascript" src="JS/vendor/foundation.js"></script>

</body>

 

CSS:

@charset "utf-8";
/* CSS Document */

.top-bar {
	padding:1rem;
	text-decoration: none;
}

.top-bar li {
    float: left;
	margin-top:-20px;
	padding-right:3rem;
	text-decoration: none;
	list-style-type: none;
}

a {
	text-decoration:none;
}

backa {
	 background: url("Images/Menubac.jpg")!important;
	 no-repeat center center fixed;
	 width: 100%!important;
	 height: 80px!important;
}
Will Moody 2 months ago

Hi Don

It looks like your css for the background image is a bit out, try this :-

 

.top-bar {

  padding: 1rem;

  background-image: url('Images/Menubac.jpg');

  background-repeat: no-repeat;

  background-position: center center;

  background-size:cover;

}

 

There is a working codepen here - https://codepen.io/FatBuddha/pen/f47922d361ae85fe271386e1a62517f9

 

Will

don 2 months ago

Thanks for your help Will, I'll try that. Don

don 2 months ago

While the code works as such there still seems to be something strange happening with the background image I'm trying to use (Or any saved locally). When I insert it within <img> tags it displays fine. However when the exact same path is used for the background image it does not display.

The code is fine because I tried linking the background image to an online image and that displays no problem. So, having tried a couple of images stored locally I get the same result: no background image shows.

Just in case it was a path issue I've reset and checked all relevant files are linked properly.

Any ideas what this is ? Thanks

Background Image CSS:

.top-bar {
padding: 1rem;
background-image: url('Images/Menubac.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
background-color:transparent;
}

Will Moody 2 months ago

Hi Don

Is the image you intend using a good size, say 2440px wide, the background-size:cover should expand it but I've found it's better to use a large image.

I notice you have background-image: url('Images/Menubac.jpg'); have you tried background-image: url('../assets/Images/Menubac.jpg');

Will

don 2 months ago

That works perfect Will, thanks again for your help ! So it needed to go up a directory level to allow it to find the background image ?

Will Moody 2 months ago

Hi Don

Yep, that's how it works, all your js, css and images are served from the assets directory and ./ takes you back to the root.

Glad you are sorted.

 

Will

don 2 months ago

I am Will, thanks for all the help !