I'm working with a template and I have a few pages i'm working on. There is a photo section at the top of each page. When I put an image into the css class, the image is enormous and wont scale to the frame.
The image is located in the id tag #subheader.
All the other photo sections of this template work just fine, everything scales perfectly. Im not understanding why this is happening here.
Heres a photo of what it looks like. This is the top left part of the image
#subheader {padding-bottom: 70px;
background: #222;background:url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/shutterstock_134687783.jpg)top fixed;}
<!-- subheader -->
<section id="subheader">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>
About Us
</h1>
</div>
<!-- devider -->
<div class="col-md-12">
<div class="devider-page">
<div class="devider-img-right">
</div>
</div>
</div>
<div class="col-md-12">
<ul class="subdetail">
<li>
Home
</li>
<li class="sep">/
</li>
<li>About
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- subheader end -->
Could you try something like this apply this then change position of cover size
#subheader {
padding-bottom: 70px;
background: url(./img7.jpg);
background-size: cover;
background-repeat: round;
}
i did that before, i hope this works for you
background: url("--YOUR IMAGE HERE--") 50% 0% / cover no-repeat scroll padding-box border-box rgba(0, 0, 0, 0);
Related
I am trying to place a background image for a personal webpage and I have yet to find any solutions for my issue. All I get is a white background.
File path for image: /personal-page/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg
File path for code: /personal-page/style.css
Here is my code:
CSS
#hero{
background-image: url(/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
HTML
<!-- Hero Section -->
<section id="Hero">
<div class="hero container">
<div>
<h1>Hello, My Name is Isaac</h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section-->
first change the id="Hero" in your html to id="hero" (with small h).
secondly change the path to a relative path in your css ./images/test.jpg (add the point)
html become
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is Isaac</h1>
Portfolio
</div>
</div>
</section>
css become
#hero{
background-image: url(./images/test.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#hero{
background-image: url("images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg");
.
.
.
}
If i'm not mistaken this :
background-image: url(/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);
Should be this :
background-image: url('/images/ales-nesetril-Im7lZjxeLhg-unsplash.jpg');
I am making a small eastern project. The website is here: My Website.
I need to make some boxes that contain a png picture on top of the background-picture like this:
I set the picture on the col, but I guess I need to make it as a background in CSS, since I cannot build something on top of an img tag:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<center><img src="https://mimsi.dk/images/logo.jpg" class="img-fluid" alt="Eastern"></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="https://mimsi.dk/images/eeg.jpg" alt="Eastern game" class="background">
</div>
</div class="row">
<div class="col-md-12" style="border: 1px solid red;">
<h1 style="text-align: center;">FOOTER</h1>
</div>
</div>
</div>
Instead of using the img src tag, I set this in my HTML and CSS:
<div class="col-md-12 bg">
.bg {
background-image: url("https://mimsi.dk/images/eeg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But nothing has worked out yet. How can I set the background-image, so it is not going to the header logo or footer, so I can build my 8 boxes on top?
First there is a mistake in your HTML in this line </div class="row"> i think you got that you can't put class in closing div
Solution
I created a fiddle
Hi I have searched in previous questions and tried multiple ways but I still have trouble setting up opacity of my background image without effecting opacity of font.
this is my html:
<main>
<div class="background">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="center">
<h1>My name</h1>
<h3>this is my website</h3>
<hr>
<button id = "mainButton" type="button" class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
</div>
</main>
and this is css:
.background{
background-image: url("xxx.jpg");
width: 100%;
height:100%;
position:fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity:0.5;
}
*I tried to use rgba(0,0,0,0.5);
*I tried to set up another css rule just for h1, or the div with the text but still the same.
Please can anyone help?
Make the markup like this:
<main>
<div class="background">
</div>
<div class="container">
</div>
</main>
Give to main position: relative;
Give to background div position: absolute;
Fix the rest. You're done.
About background size
You can modify the image background size by background-size and using values like cover, contain, 100%, 100% 100% etc.
If you want to cover all the page, use value 100vh, meaning 100% of the viewport height.
I am creating a web app using angularjs. I have added the navigation, content and footer in index.html. so ui-view will change the route accordingly. I want to show full screen background image for main page and the rest of the page will only show according to their content.
<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>
Here is the HTML will show in ui-view and want to show 100% height. It does not show 100% height. If I up it in index.html it is showing 100% background image width. May I know which one is causing the issue.
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat center center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
you need to set the height to 100% on the body (and possibly all parent elements too)
alternatively, try the new viewport height CSS unit ...
height: 100vh
see https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
supports looks good ...
http://caniuse.com/#feat=viewport-units
I have a bootstrap webpage with header and footer and I would like to set a background image for the div in between.
My goal is that the background image could cover all area between header and footer (div id=xx in code below) while I don't need to hard coded height and width, but failed.
Can you please help?
<body>
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" style="background:url(images/background.jpg) no-repeat;background-size:940px 500px;height:500px;width:940px" title="KnowSG" align="left" id="hplogo">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
CSS
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -50px;
}
#push {height: 50px;}
.footer {
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
padding-top: 15px;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
Okay I cleaned your code up a bit. You had 2 id attributes on the same element which you shouldn't do. and I added a class.
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" title="KnowSG" align="left">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
#xx {
background-image: url('http://placehold.it/1920x1080.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Is it possible that your background image is either not where you think it is, or missing? Quick test: in a new browser window: http://yourdomain.com/images/background.jpg (using the file / dir names from your question code)
This might be the problem: Note also that if you have an external stylesheet (in your example you styled the #xx div using inline html attribute), and if that stylesheet is in a subfolder, such as /css, you must do this (because the images folder is not directly underneath the css folder):
background:url(../images/background.jpg) no-repeat; /* Note the ../ prefix */
I created a jsFiddle and substituted the placeholder website placekittens.com for your hard-coded image - it works fine.
jsFiddle Demo
Observations:
If you want the background image flush up against the header and footer, you must make these adjustments (as I did at top of the jsFiddle's CSS):
.container-fluid h3 {margin:0;}
.navbar {margin:0;}
You can do this if you want the bg image flush up against the header, but not the text:
.container-fluid h3 {margin:0;padding:50px;}