Greetings,
I have a section that have both background color and image, what I’d like to do is rotate the background image (90deg) without rotating the section itself.
here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Desgin + research">
<meta name="keywords" content="architecture, website, design, web development">
<meta name="author" content="Abdulrahman Mushref">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!---------- Title + icon ---------->
<title>Welcome to urbanphenomena</title>
<link rel="shortcut icon" href="favicon.ico"/>
<!---------- BootStrap & CSS ---------->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<!---------- Start of body ---------->
<body>
<div class="navbar-fixed-top">
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;;">1</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">2</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">3</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">4</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">5</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">6</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">7</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">8</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">9</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">10</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">11</div>
<div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">12</div>
</div>
<!---------- Start of Nav ---------->
<div class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<!-------- Nav header/toggle button -------->
<div class="navbar-header">
<span class="sr-only">Toggle Navgiation</span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#demo">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-------- Navigation Menu -------->
<div class="navbar-collapse collapse" id="demo">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-------- Home Section -------->
<div class="jumbotron">
<div class="container-fluid section-home" id="home">
<div class="row">
<div>
<!---------- Title ---------->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-xs-push-1">
<h1><b><span class="title">urbanphenomena</span></b></h1>
<h1 style="margin-top: -20px;"><span class="title">design+research</span></h1>
</div>
</div>
</div>
</div>
</div>
<!-------- About Section -------->
<section class="container-fluid section-about" id="about">
<!-------- About Text -------->
<div class="row">
<b class="col-lg-12
col-md-12
col-sm-12
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1
b">About</b>
<div class="col-lg-5
col-md-5
col-sm-5
col-xs-11
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<p>urbanphenomena: design+research, is a multi-disciplinary design consultancy studio based in Jeddah, with satellite offices in Madinah and Riyadh. From its inception, the studio has focused on bringing aspects of our local culture to a wider audience via the platform of design and research. Through our design work we provide clients and partners with architectural, interior design, wayfinding and graphic design services; using a combination of concepts, drawings, models and local market know-how. The type of projects vary, but the common denominator has always been “identity”; evolving a local identity for the project with contemporary functions and use. Weaving this approach for a wide variety of finished projects, ranging from commercial office spaces, exhibition stands to schools and cultural buildings.</p>
</div>
<div class="col-lg-5
col-md-5
col-sm-5
col-xs-11
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1"><span>
<p>To compliment or design activity, we continuously conduct a variety of research work and consultancy, providing advisory services on the built environment and its interaction with the urban context and culture. This research is then used for projects as presentations, in the form of reports with our design projects, or submitted to publications for print (books or professional journals) and as online articles. As part of the think tank activities of “urbanphenomena”, we have been active in research and publishing on the current condition of architecture practice and design in the region. Our research covers topics such as urbanism in the Middle East, Islamic architecture of Central Asia, Japanese Architecture and urbanism, information architecture, way-finding in the built environment, and mapping the cultural identity of cities.</p>
</span>
</div>
</div>
</section>
<!-------- Projects Section -------->
<section class="container-fluid section-project" id="project">
<div class="row">
<div class="col-lg-12">
<b class="col-lg-1
col-md-1
col-sm-1
col-xs-1
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b">Projects</b>
<!-------- SlideShow -------->
</div>
</div>
</section>
<!-------- Location Section -------->
<section class="section-location" id="location">
<!-------- MAP -------->
<div id="map"></div>
</section>
<!-------- Contact Section -------->
<section class="container-fluid contact-section" id="contact">
<div class="row">
<div class="col-lg-12 col-lg-push-1 col-md-12 col-sm-12 col-xs-11">
<div class="row">
<b class="b col-lg-12">Contact Us</b>
</div>
<!-------- Contact INFO -------->
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
<div> </div>
<div> </div>
<h3>Address</h3>
<span>4140 Al Kayyal, Ar Rawdah<br>Jeddah 23434-8287<br>Saudi Arabia</span>
</div>
<div class="col-lg-2 col-md-4 col-sm-3 col-xs-5">
<div> </div>
<div> </div>
<h3>Hours</h3>
<span><strong>Sunday - Thrusday</strong> 8am - 6pm<br><strong>Friday - Saturday</strong> Weekend<br></span>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
<div> </div>
<div> </div>
<h3>E-mail</h3>
<span><a href="mailto:info@urbanphenomena.net">info@urbanphenomena.net</a></span>
</div>
<div class="col-lg-2 col-md-5 col-sm-3 col-xs-5">
<div> </div>
<div> </div>
<h3>Phone</h3>
<span>+966 12 660 4229</span>
</div>
</div>
</section>
<!-------- Footer -------->
<footer class="container-fluid footer" id="footer">
<div class="row">
<div class="col-lg-12 col-lg-push-5
col-md-12 col-md-push-5
col-sm-12 col-sm-push-4
col-xs-12 col-xs-push-3">
<span>©2016 urbanphenomena, Jeddah</span>
</div>
</div>
</footer>
<!---------- JQuery & Other scripts ---------->
<script src="map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBD0ZZoFqm2UobxsJB1cyuF6vnti2qSbsA&callback=initMap" async defer></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and here is the CSS (“#about” contains the background color and image):
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
padding-bottom: 20px;
}
.jumbotron {
background:url('../imgs/wesal.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/**********************************************
HOMEPAGE + TITLE
***********************************************/
.title {
text-shadow: 0px 0px 10px #696969;
color: #f6f6f6;
font-size: 70px;
}
.title2 {
text-shadow: 0px 5px 15px #3f3f3f;
opacity: 0.2;
}
ul {
color: white;
font-size: 17px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-toggle {
width: 100%;
opacity: 0.2;
}
.icon-bar {
margin-left: 50%;
}
.navbar-nav > li > a {
padding-top:10px !important;
padding-bottom:5px !important;
}
.navbar {
min-height:32px !important;
opacity: 0.9;
}
p {
font-size: 16px;
}
.b {
font-size: 30px;
}
/**********************************************
SECTIONS
***********************************************/
#home {width:100%;height:50%;}
#about {padding-top:50px;margin-top:-40px;height:500px;color: #7e7e7e; background: #3f3f3f url('../imgs/pattern.png') left no-repeat;}
#project {padding-top:50px;height:95%;color: #7e7e7e; background-color: white;}
#location {padding-top:50px;height:85%;}
#map {width:100%;height:100%;}
#contact {padding-top:50px;height:500px;color: #7e7e7e; background-color: #2b2b2b;}
/**********************************************
FOOTER
***********************************************/
#footer {
background-color: darkgray;
color: #7e7e7e;
padding: 10px;
}
