Can't figure out why the background image is not showing... Used / and \ , short and long path... Any cue would be appreciated. Thanks
<head>
<title>Restaurant Lambda</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Menu-->
<header>
<div class="container">
<nav class="topnav">
Home
About
Ingredients
Menu
Reviews
Reservation
</div>
</nav>
</header>
</body>
.countainer {
background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}
There are actually 3 reasons this might be happening.
In the div, it says <div class="container"> but in your css, you have
.countainer {
background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}
So you would need to fix the spelling error.
Put the file and the image in a folder, then link it like
.container {
background: url("folder/imagename") no-repeat 0 0;
}
Fix your formatting
In the code block, you've got <div> then <nav> but you end with </div> then </nav> so after reformatting your code, it should look like
<div class="container">
<nav class="topnav">
Home
About
Ingredients
Menu
Reviews
Reservation
</nav>
</div>
As well as the typo in your class name (the extra 'u' in container/countainer), your syntax is incorrect. You are closing the nav after you've closed the div, instead of the other way around.
Correct these errors, and your image should show correctly (given that your path is correct)
.container {
height: 100vh;
background: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg") no-repeat 0 0;
}
nav {
text-align: center;
}
nav a {
color: white; /*added for better visibility*/
font-weight: bold;
}
<body>
<!--Menu-->
<header>
<div class="container">
<nav class="topnav">
Home
About
Ingredients
Menu
Reviews
Reservation
</nav>
</div>
</header>
</body>
Related
The following code will load a background image that is cut off or covered by the ul/li's
This only occurs with bootstrap. I have it on jsfiddle
without bootstrap:https://jsfiddle.net/kng2upm1/
with bootstrap:https://jsfiddle.net/kng2upm1/1/
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt"Logo"></a>
</div>
<div>
<ul class="nav navbar-nav">
<li> Git Hub
<li> Game Vote Alpha
<li> Minecraft Server
</ul>
</div>
</div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
<li> TV Shows
<li> Movies
<li> Music
<li> Audio Books
<li> Games
<li> Pen and Paper RPG Scans
</ul>
</body>
CSS
#filelist{
list-style-type: none;
}
html{
background-image: url("image");
background-repeat: no-repeat;
background-size: 500px auto;
background-attatchment: fixed;
background-position: right;
}
Bootstrap adds a background-color: #fff to the body, since you are applying the image to the HTML element, try changing your css to put the image on the body element.
https://jsfiddle.net/Lgd2d99h/
Your bootstrap containers were all messed up. You had the background just in one of the nested elements. You should put your background element into the largest containing parent element for the best effect.
HTML:
<ul class="nav navbar-nav">
<li> Git Hub
<li> Game Vote Alpha
<li> Minecraft Server
</ul>
<h1>File Directories</h1>
<ul id="filelist">
<li> TV Shows
<li> Movies
<li> Music
<li> Audio Books
<li> Games
<li> Pen and Paper RPG Scans
<li> Programing Videos
</ul>
</div>
</body>
CSS:
#filelist{
list-style-type: none;
}
html{
}
.container-fluid{
background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
background-repeat: no-repeat;
background-size: cover;
background-attatchment: fixed;
background-position: right;
}
This is something Bootstrap is adding to your body tag. You can override it by using:
body{
background-color: initial;
}
Make sure your CSS file is referenced after Bootstrap's.
html {
background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
background-repeat: no-repeat;
background-size: 500px auto;
background-attachment: fixed;
background-position: right;
}
body {
background-color: initial !important;
/* !important to force Code Snippet to use this value.*/
}
#filelist {
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo">
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li> Git Hub
<li> Game Vote Alpha
<li> Minecraft Server
</ul>
</div>
</div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
<li> TV Shows
<li> Movies
<li> Music
<li> Audio Books
<li> Games
<li> Pen and Paper RPG Scans
<li> Programing Videos
</ul>
</body>
Add background to body tag (inline css)
<body background="http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png">
Bootstrap might be overriding your background...
Don't style the HTML tag...
....style the body tag.
The HTML tag should never be styled for visual changes.
Merely changing your CSS to apply to the body tag rather than the HTML tag corrects this issue.
Fiddle update
(there are also markup errors in your html)
I'm new to html and css. I'm trying to learn them but I have been having some issues. Basically I've been trying to create the website with the background image that has the navbar along the top (this works when previewing with brackets not yet here).
Can I change the colour of the navbar?
Also, how to have h5 header centred on the left side of the page, with h5 header below it, but as four lines, not as 2 long ones overlaying the image.
If anyone could help out that'd be great.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
}
.txtpic {
position: absolute;
text-align: center;
background-image: http: //i.imgur.com/pE2NrKh.jpg;
color: white;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<title>Kyrgystan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<title>Kyrgystan exped</title>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: relative; top: 0; left: 0;" width="100%">
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</nav>
<style>
text-align:justify;
</style>
</div>
<div class="txtpic" style="top: 100%;">
<div class="row-sm-3"></div>
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</body>
</html>
if you want to change your navbar text color try with
.navbar-default .navbar-nav>li>a {
color: red !important;
}
EDIT:
Let say this is the html markup
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="list">
<div class="txtpic" style="text-align: center">
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
1- / youre previous code you was trying to put an image as an background with img element
1-1/ better way to do it with css just
.list {
background: url(http://i.imgur.com/pE2NrKh.jpg);
background-size: cover;
}
also you said that you cant change the color of your navbar text, you need to select the a element with .navbar-nav > li > a
.navbar-nav > li a{
color: white !important
}
For having the contents of h5 as 4 lines instead of the default way they appear try using the <br> tag. This tag breaks the line and starts a new line. So you could write it the following way:
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips.
<br> We have over a thousand nights under canvas between us, and there are more in the pipeline.
<br> We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart.
<br> So far our outings have taken us across Europe, Asia and Africa.
</h5>
check out the following link to help you understand this tag better
The reason why this is not on top of the background image is that you have defined absolute positioning in the class 'txtpic'. try changing it to something else and tell me what happens.
Also the navbar background-color seems to change when i try to do so. If you want to change the text color use 'color:' instead of 'background-color'.
Hi I'm trying to set a background image for an angularjs website. I've followed quite a few tutorials/examples. They do work. However I want my background image to be set in the bottom of the page above the footer behind a view without affecting the view that's on top. Some suggestions haven't been helpful.
The main culprit is this gap here..which is preventing the background from going to the bottom...I have no idea where in the code is causing this...does anyone know? It's not footer because I've commented it out and the gap still persists.
I've tried filling the div and image sizes to 100% and 100% width/height...no effect.
and this is the full background
As you can see the bottom half is missing.
If I use background-image in css...it crops the background and forces it to stay on top rather than bottom.
I've also tried using a div and filling it with background
.form-wrapperBack {
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #fff;
font-family: Arial;
background-image: url("/img/river.png");
background-repeat: no-repeat;
background-height: 100%;
background-position: center bottom;
Please see image of what it looks like when I set the background in css:
/* general settings */
html {
min-height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
width:100%;
background-color:#000;
}
body {
background-color:000;
font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
color:#FFF;
font-weight:100;
margin:0;
min-height:100%;
width:100%;
}
This is index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/history_00.png" />
<h7>Building lasting relationships<h7>
</header>
<body>
<ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Join Us</a>
</li>
<li ng-class="{active: isState('about') }">
<a ui-sref="about">About</a>
</li>
<li ng-class="{active: isState('invest') }">
<a ui-sref="invest">Investments</a>
</li>
<li ng-class="{active: isState('contact') }"> </div>
<a ui-sref="contact">Contact</a>
</li>
<li ng-class="{active: isState('login') }">
<a ui-sref="login">log In</a>
</li>
<li ng-class="{active: isState('logout') }">
<a ui-sref="logout">log Out</a>
</li>
</ul>
<h3 class="text-muted"> </h3>
<br>
</div>
<div id="back-Img3">
<div ui-view class=""></div>
<br>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="js/rg-slider.min.js"></script>
<script src="js/script.js"></script>
<script data-require="ui-router#0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<script src="js/dialogs.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
If I edit the css and change the image sizing...it also changes the size of the view which I don't want.
style.css
/* general settings */
html {
min-height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
width:100%;
background-color:#000;
}
body {
background-color:000;
font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
color:#FFF;
font-weight:100;
margin:0;
min-height:100%;
width:100%;
}
div[back-img3]{
width: 100%;
height:500px;
color: #fff;
}
Also it only shows a part of the background...not all of it.
Is there another way to set an image background in index.html?
Help would be appreciated thank you.
You should position your .form-wrapperBack fixed, make sure it has 100% width and height and that it stays at the top of page and set the background-size to cover:
.form-wrapperBack {
position: fixed;
height: 100%;
width: 100%;
top: 0;
background-image: url("/img/river.png");
background-size: cover;
}
I made a fiddle for you, using some random image.
If any of the rules above does not apply, it must be overridden by another css rule, with a stronger selector. You can easily find it by inspecting the element in a modern browser and either remove that rule or make your selector stronger.
div[back-img3]{
width: 100%;
height:500px;
color: #fff;
}
If you declare image as background of this particullary div it is always 500px and background is cropped to fit that.
Try to add background to the body element
background:src('file_path');
background-size:cover;
also you have little typo here:
body {
background-color:000;
This question arises when I tried the proper solution to a container which had multiple internal divs.
This works fine with a simple div in body
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#990000;
}
-- well ain't that typical of this week: 60 hours of work creating by the book html and 1/10th is billable because it does not work: instructions don't work though followed to the letter; and they say nothing about having to highlight the entry and then hit tab to make id show up in the draft window!--
Why doesn't this work in a more complex page wherein the #wrapper becomes #container_toolbox with several more divs within it. In both I.E. and Mozilla there is always a gap at the right. Why?
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color:#99000;
}
Now, if I replace the first code with second in a test page, it works perfectly. Why, when there are nested divs within this #container_toolbox, does it not work.
I am using both Dreamweaver and Aptana'a download to create pages.
here are the two samples: the first is the one that works:
<head>
<title>ggggg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
background-color: #990000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container_toolbox">
<p> in mature regions, and changes of focus among a large
pack of shops as various markets undergo change. How do you pick the right one to
work with you at any point in time? -- Well, maybe you shouldn't pick one.</p>
</div>
</body>
Here is the one that doesn't work I've had to eliminate html5 tags frequently:
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Toolbox</title>
<link href="../styles/toolbox_stylesheet.css" rel="stylesheet" type="text/css">
<link href="../styles/basic_style_2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" >
document.createElement("header");
document.createElement("hgroup");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("nav");
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#container_toolbox
{
min-height: 100%;
height:100%; <!-- if IE -->
width: 100%;
min-width:100%;
}
</style>
</head>
<body>
<div id="container_toolbox">
<!--start container for page-->
<!--top section includes: header with logo; aside with contact info...
site navigation-->
<div id="head">
<div id="logoDiv"><img src="../images/headerLogo.jpg" alt="Fabshops.com"></div>
<div class="aside" id="contactAside">
<p>Phone: (973) 738 2599</p>
<p>Email: info#fabshops.com </p>
</div>
<div class="nav f" id="mainNav">
<ul class="navul" id="ulMainNav">
<li>Home</li>
<li>Equipment Types</li>
<!--<li>About</li>-->
<li>Contact</li>
<li>Newsletter</li>
<li>Toolbox</li>
</ul>
</div>
</div>
<div id="accentLine"> </div>
<!--body section includes: inner navigation; articles; aside-->
<!--*********************************************************************-->
<!--*********************************************************************-->
<article id="content_toolbox">
<!--begin content section-->
<!--*********************************************************************-->
<!--begin sideNav-->
<nav class="nav" id="sideNav">
<div class="nav" id="sideHeader">
<h2>Tool Box</h2>
</div>
<div id="lowerNav">
<ul class="sidenavul" id="sideNavList">
<li>Home</li>
</ul>
</div>
</nav>
<!--End sideNav-->
<!--*********************************************************************-->
<section class="sectionhd_toolbx" id="sectionhd_toolbx">
<!--begin contents of section head-->
<h1>Select the converter appropriate for your purposes.</h1>
<h2>Make sure your browser permits Javascript</h2>
<!--end contents of lead article-->
</section>
<!-- ******************************************************************** -->
<!--<section id="section_toolbx">--><!--begin contents of second article--><!--end contents of second article-->
<!--</section>-->
<!--end content section-->
<section id="toolbox">
<!-- Put the toolbox into a table as margin-left/rignt:auto is not working here -->
<!-- Begin toolbox table -->
<table class="tbtoolbx" id="tbtoolbox">
<tr>
<td id="tdleft"> </td>
<td id="tdmiddle">
<!--begin iframe section-->
<p>Volume & Capacity |
<a href="PressureConverter.html" target="calcIframe">Pressure
Converter</a> | <a href="LengthConverter.html" target="calcIframe">Length
Converter</a> | <a href="WeightConverter.html" target="calcIframe">Weight
Converter</a> | <a href="CurrencyConverter.html" target="calcIframe">Currency
Converter</a><br>
Temperature Converter</p>
<iframe name="calcIframe" src="../toolbox/Capacity_Volume.html" scrolling="no">You
need a Frames Capable browser to view this content. </iframe>
<!--end iframe section--> </td>
<td id="tdright"></td>
</tr>
</table> <!-- EndBegin toolbox table -->
</section>
</article>
<!-- ************************************************************************* -->
<!--***************************************************************************-->
<!--footer-->
<div class="footer" id="foot">
<p><Home | Equipment Types | <a href="../About/OurShops.html">Our Shops | Contact | Newsletter | Toolbox</p>
<p>Fabshops.com is a subdivision of Ridgeback Company, Inc</p>
<p>Headquarters: 61 Ormont Road, Chatham, NJ 07928</p>
<p>Web site designed by <a>TutorWright</a></p>
</div>
<!--end container for page-->
</div>
</body>
</html>
Chances are your inner divs have margins that are overflowing the container div and, in effect, becoming margins on it. Try {overflow: hidden;} on the wrapper.
It's hard to say for sure without some HTML or a demo, however.
ok i have the following html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>marriage</title>
</head>
<body>
<div id="container">
<div id="logo">
<h1>marriage logo</h1>
</div> <!-- end logo -->
<div id="input">
<input type="text" name="search" id="search" />
<input type="submit" value="search .." />
<p>search for words like: calm, honest ... etc</p>
</div> <!-- end input -->
<div id="questions">
<h2>Why our website ?</h2>
<p>because you find your soulmate as easy as possible, just type the word you looking
for in your soulmate and press enter to start searching</p>
</div> <!-- end questions -->
<div id="side">
<p>New User or signup if not</p>
</div> <!-- end sidebar -->
<div id="footer">
Copyrighted © 2012
</div> <!-- end footer -->
</div> <!-- end of container -->
</body>
</html>
and here is the scss file for styling and I'm using 960 grid system for layout
#import "compass";
#import "960/grid";
$ninesixty-columns: 12;
html, body {
#include background-image(linear-gradient(#fcfad0, #FFF));
width: 100%;
height: 100%;
}
#container {
#include grid_container;
#logo {
#include grid(6);
// #include clearfix;
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
text-indent: -9999px;
a {
text-decoration: none;
}
}
}
}
the background image in <h1> tag is not showing with the html file, i don't know why .. is there something missing here ?
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
}
I see you use Compass. So you have configured the directory containing the images (ie images_dir) in your configuration file.
Instead of to call directly your image, you shoud use the image-url() helper, like this (without specifying the directory images):
background: image-url(logo.jpg) no-repeat;
Also, if you want to hide the text, you can use the mixin #hide-text. And finaly, perhaps that the #replace-text-with-dimensions mixin is what you want:
h1 {
#include replace-text-with-dimensions(logo.jpg, 0, 0);
}
However, I imagine you want to make the logo clickable. In this case, the code will be:
<h1 id="logo">marriage logo</h1>
and:
#logo {
a {
#include replace-text-with-dimensions(logo.jpg, 0, 0);
display: block;
}
}