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');
Related
I'm new. I've created a <div> inside a <section> and in this <div> I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take all the space of their Gridlex block.
Anyone, would know what I can do to fix this?
Here the photo:
enter image description here
Here the CSS I've wrote for both images:
.bg-about1 {
background-image: url('../images/about1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
.bg-about2 {
background-image: url('../images/about2.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
<section class="light-bg section-about">
<div class="grid">
<div class="col-5_sm12-middle">
<h2 class="padded-7p center uppercase p-white">Title.</h2>
</div>
<div class="col-7_sm12-middle bg-about1">
<!-- <img class="img100" src="./images/about1.jpg" alt="Art design"> -->
</div>
<div class="col-5_sm12-middle bg-about2">
<!-- <img class="img100" src="./images/about2.jpg" alt="photo"> -->
</div>
<div class="col-7_sm12-middle">
<p class="padded-2 p-white"> my text.</p>
</div>
</div>
</section>
maybe try instead of
background-size: cover;
writing:
background-size: contain;
I have a simple code for a simple webpage, but it does not work: for some reason, the background is not displayed. I checked everything in different browsers on different computers. Where do you think there might be a mistake?
.section--map {
padding: 40px 0;
background: #e6e6e6 url("../images/map-bg.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
<section class="section section--map">
<div class="container">
<div class="map">
<div class="map__title">
<div><i class="fas fa-map-marker-alt"></i></div>
<h2>Open Map</h2>
</div>
</div>
</div>
</section>
Did you check if path to your image is correct or it might be that your image type is .jpeg?
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);
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'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".
My code is something like this:
<div class="container">
<div class="thumbnail">
<form....>
<fieldset>
.
.
.
</form>
<img src="cs.jpg" class="img-responsive">
</div>
<div>
Have you tried setting the background image of that container as the image? IE:
.container {
background-image: url("cs.jpg");
}
Or you can do it inline:
<div class="container" style="background-image: url('cs.jpg');">
...
</div>
or you could try like this..
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</body>
and in css like this:
.jumbotron {
position: relative;
background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}