Background Image Size and Nav bar colour

Hello,

I have a couple questions today and was just wondering if I could get a bit of help.

I’m using a child theme and am wanting to set a background image, but the image displays slightly bigger than my display (I’m assuming it’s displaying it’s actual width of 1920px). I’ve been messing around with the CSS but I just cannot figure out how to make it so that the image width is always equal to the screen it is displayed on. Please could I get a bit of help?

Also, is it possible to make the background colour of the navigation bar transparent (with a background colour for the hover and active attributes)?

Thanks in advance
Leon

Hi Leon,

I hope you are well today and thank you for your question.

. I’ve been messing around with the CSS but I just cannot figure out how to make it so that the image width is always equal to the screen it is displayed on. Please could I get a bit of help?

Could you please share me your site URL where it’s displaying so that i can help you?

Also, is it possible to make the background colour of the navigation bar transparent (with a background colour for the hover and active attributes)?

Do you want to make the background colour transparent for only the navigation bar menus which are hovered or are active?

Kind Regards,
Movin

Sure, it’s in maintenance mode at the moment, but you can see what I have on this page http://www.nintybuzz.com/contact-us/ (background is far from finished)

As for the navigation, I want the entire bar to be transparent, but I still want the tabs to be coloured whenever you hover the mouse over them or if that is the page you are on

I’ve finally figured it out, thanks for the help however :slight_smile:

I used this for the image size:

body.custom-background { background-color: #adeaff; background-image: url('http://www.nintybuzz.com/wp-content/uploads/2016/05/Background22.jpg'); background-repeat: no-repeat; background-position: top left; background-attachment: scroll; background-size: 100%; }

and this for the nav bar, though it doesn’t quite look right what I wanted so I’ll need to fine tune it to look less blah lol

.site-main [class*="navigation"] a,
.more-link {
	border: 1px solid #d00000;
	padding: 6px 12px;
	border-radius: 4px;
	display: block;
}
.site-main [class*="navigation"] a:hover,
.more-link:hover {
  color: #fff;
  background: #d00000;
  text-decoration: none;
}
.more-link {
  float: right;
  margin: 10px 0;
color: #d00000;
}
.site-main [class*="navigation"] {
	margin: 0 0 1.5em;
	overflow: hidden;
}
[class*="navigation"] .nav-previous {
	float: left;
color: #d00000;
}
[class*="navigation"] .nav-next {
	float: right;
	text-align: right;
color: #d00000;
}

.navbar.navbar-default {
  background-color: transparent;
  font-weight: bold;
font-size: 150%;

}

.navbar-default .navbar-nav > li > a {
  color: white;
background-color: rgba(36,130,255,.5);
background-opacity: 0.6;
  border-right: 1px solid rgba(0,0,0,.2);
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	border-right: 1px solid rgba(0,0,0,.8);
	border-left: none;
}
.navbar {
	border-radius: 0;
}
.navbar-default {
	border: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
	color: black;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu > li > a {
	padding: 18px 20px;
	color: #fff;
}
.dropdown-menu,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	background-color: white;
	border: none;
}
.dropdown-menu .divider {
	background-color: rgba(0, 0, 0, 0.1);
}
.navbar-nav > li > .dropdown-menu {
	padding: 0;
}
.navbar-nav > li > a {
	padding-top: 18px;
	padding-bottom: 18px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

Awesome great to see you got that figured out.

Please advise if you have more questions.

Have a fantastic day!