How do I create background image and add text over it
Question
To start i am very new to bootstrap but i wanted do something similar to this example: text over background image but inside of a bootstrap framework. I have tried creating a div inside the container below the navbar but that seems to put a white background behind the text covering the image behind... you can see my code here: JSFiddle: my code . or it is as follows:
CSS
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
@import url(http://fonts.googleapis.com/css?family=Oswald:700);
html {
background: url(http://3.bp.blogspot.com/_6r-mOI0OuO0/S6q3VodCqI/AAAAAAAAB5A/Uycl8dCr92A/s1600/NYC15BrooklynBridge02.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Oswald', sans-serif;
}
h1 {
color: #fff;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}
span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #fff;
}
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oswald:700);
h1 {
color: #FF6600;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}
span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #FF6600;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</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>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<h1>
<span>some text</span><br>some other text
</h1>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2 answers
solution1
2 ACCPTED 2014-12-06 07:15:02
Just add body { background: none; } body { background: none; } . FIDDLE
solution2
1 2014-12-06 07:16:49
I see that you had added the CSS style to the whole body which means you then have to turn off all background for everything that sits on top of it. But you could just add the style you created to the container with the text in it. You then may need to style the text to make is visible.
<div class="container full">
<h1>some text</h1>
<h1>some other text</h1>
</div>
Btw You really shouldn't have two bits of header text split with a break, use two headers and position them. Also you really should close the break tag if your going to use it. :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.