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 14 days 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 14 days ago

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

don 11 days 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 11 days 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 10 days 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 10 days 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 9 days ago

I am Will, thanks for all the help !