HTML & CSS newbie can't work out why div container isn't being applied - I put the color as red to test it on the font - but it's not updating. I've named the container class as home.hero
I want to use a container for it, as I want to make text changes max width etc only affecting the text and not the background.
I am very bad at explaining this atm!
Thanks in advance (sorry for being a newb/noob/n00b)
P
section#home {
background: url('images/test.png') no-repeat center center/cover;;
color: white;
justify-content: left !important;
padding: 8%;
max-width: 60%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.home-hero {
color: #E83C3C;
}
<section id="home">
<div class="home-hero">
<h2 class="text-dark">Hello we are,</h2>
<img src="images/test.png" alt="">
<h2>Test <h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, augue vitae interdum rutrum, quam.</p>
</div>
</section>
Your code does work for me, therefore I would suggest to you that makes sure that your css-link is correct.
You can in a lot of developer tools ctrl+click the css-link in the HTML file, and then you should be directed to the css-file. If you're directed to an undefined file or gets asked to create said css file, you know for sure that the file path in your html-document is wrong.
Note: css-link are in the head of the html-document and looks like this:
<link rel="stylesheet" href="aFolderHere/yourpage.css" type="text/css" />
or if your css is in the same directory/folder as your html is would look more like this:
<link rel="stylesheet" href="yourCSS.css" type="text/css" />
You have double semi-colons behind the first line in your css - this probably makes the browser stop reading past this point as it produces an error, so none of the remaining css is read:
section#home {
background: url('images/test.png') no-repeat center center/cover;;
change to
section#home {
background: url('images/test.png') no-repeat center center/cover;
Related
I have a strange situation here. I've tried both adding a bg image to a customized style to override/extend a bootstrap style (column) as well as just embed a style in the div attribute. For whatever reason, neither seems to work.
examples..
<div class="col-lg-4 col-md-6 col-sm-12 text-center" style="background:image
url('images/test_back.jpg')">
<img class="rounded-circle" alt="140x140" style="width: 140px; height: 140px;"
src="images/140X140.gif" data-holder-rendered="true">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
Then, in another one I do the following:
in the HTML file:
<div class="columns divboxshadow_rt">
<p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>
<h4>Bargains ()</h4>
<div id="mycarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/deals-steals1.png" class="d-block w-80" alt="Steals and Deals 10">
</div>
</div>
</div>
The above does not work...HTML that does have a style reference embedded in the div tag that does work...
<div class="columns" style="background-image:
url('images/test_back.jpg')">
in the CSS file:
.divboxshadow_rt {
width: 22%;
background-image: url('images/test_back.jpg');
/* border-left: none; thin #BFB9B9;*/
border: 2px solid #968E8E;
border-top: none;
border-left: hidden;
padding-left: 10px;
padding: 2px ;
padding-left: 8px;
margin: 5px auto;
box-shadow:0 4px 5px #888888;
border-bottom-right-radius: 11px ;
border-bottom-left-radius: 4px ;
align-content: center;
align-items: center;
text-align:center;
}
BTW, neither that bkg image ref housed in the divboxshadow_rt class embedded in single or double quotes works.
Any ideas what could be preventing this from being rendered? This seems like it should be pretty straightforward. I should clarify that all of the attributes in the divshadowbox class above are showing, EXCEPT for the bg image. I have since altered this CSS file and this class, but I have another issue in that the left border seems to show no matter what I do - i.e. make it hidden, none, etc. I looked at the BS CSS file and I don't see cols listed with border attributes so I wouldn't think that affects it. Anyone know why a border on the left side would show no matter what? Thanks!
ok, this is strange. This was a false read from the IDE of the Creative Cloud in DreamWeaver! Very aggravating, and not sure why it works this way, but it would not traverse to the path properly where my basic HTML or template file was saved.
So DW wanted to go to /images/img.jpg or "images/img.jpg but needed to traverse up one more directory to get there! Problem solved, finally.
wow. It turns out the IDE in Dreamweaver was incorrectly mapping these for some reason. Luckily I figured it out and fixed it; problem solved.
I am using Marp which is a tool to create presentations in markdown and convert it into pdf. On the first slide I have some content such as this:
# <center> Working with Virtual Box </center>
<img align="right" src="images/logo.png" width="250">
All of this is top center aligned. What I would want is that the text to be middle aligned(vertically and horizontally) and the image to be bottom right aligned. I couldn't find much about it in the Marp documentation. I am hoping someone with better css know how could help! Believe me, I searched for over 2 hours on this, but my lack of css skills is getting me nowhere.
There are three options:
1. Make the image part of the background.
It sounds like you are trying to put a logo on the slide in the bottom right. In this case, if it is to be on most slides - just create a new background with the image in the bottom right. Then set the image as the slides' background, using the bg keyword in the alt-text box:
2. Create an image background and offset it.
(Perhaps less applicable for a 'logo in the corner' effect put works well for other images).
Insert the image and use the bg keyword in the alt-text box, along with the either right or left.
This can be further customised with percentages - adjusting how much of the slide is given over to the background image.
The image can also be scaled with an additional percentage.
The example below sets 40% of the slide on the right-hand side over the background, and the image is then scaled to 80% of it's original size.
3. Use the footer directive and adjust the css to suit.
This allows for great flexibility of sizing and positioning of the image.
Use Marp's footer directive, and include the image link within that. This can be applied globally or locally to individual slides (as in the example below).
Then you can change the css to customise the size an position of the image. This can be done through a theme css or via the markdown text with tags (as below).
<!-- _footer: "" -->
<style>
footer {
height: 200px;
margin-bottom: -80px;
}
footer img {
height: 100px;
float: right;
}
</style>
# Logo - footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc molestie euismod ipsum, et malesuada sem condimentum a.
Sed pellentesque arcu mattis massa porttitor volutpat.
Try something like this :
where x is your width in %
Source (french) : https://www.unixmail.fr/informatique/presentation-avec-marp/
Tested this today and it worked:
<style>
img[alt~="center"] {
display: block;
margin: 0 auto;
}
</style>
Source: https://github.com/marp-team/marpit/issues/141
Try float right inline style:
<img src="images/logo.png" style="float:right" width=250>
I'm building a simple site with bootstrap and I can't seem to get the background-image css styling to work. I want to put it on my .jumbotron div which is the first section of my website (besides the navbar, some would call it the hero section).
Here is my code, where did I go wrong?
.main-banner {
background-image: url("../img/collection-of-classic-cars.jpg") no-repeat;
}
<section>
<div class="jumbotron">
<div class="container">
<div class="main-banner"></div>
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a>
</div>
</div>
</section>
File Path:
/img/collection-of-classic-cars.jpg
Note that the image URL should be relative to the stylesheet not the HTML you are serving. So most likely your image path is not correct. Other very common mistake is mismatch in the file name. FOO.jpg is not the same as foo.jpg in unix like systems.
You shouldn't use no-repeat in background-image property, it's can be used within background shorthand, so make it this way:
.main-banner {
background-image: url("../img/collection-of-classic-cars.jpg");
background-repeat: no-repeat;
}
http://tympanus.net/codrops/css_reference/background-image/
http://tympanus.net/codrops/css_reference/background-repeat/
<div class="main-banner"></div> have no size...
http://jsfiddle.net/fnw39gco/1/
no repeat need to define as own css tag:
background-repeat:no-repeat
http://www.w3schools.com/cssref/pr_background-repeat.asp
As vicodin stated, your CSS code is wrong. The background-image property will only accept a URL. The best way would be to use the background shorthand:
background: url("../img/collection-of-classic-cars.jpg") no-repeat;
/* Adding even more options */
background: #FFF url('img.jpg') center fixed no-repeat;
/* Which would be the same as */
background-color: #FFF;
background-image: url('img.jpg');
background-position: center;
background-attachment: fixed;
In my case, after going through many SO(Stack Overflow) Questions and almost after many hours of searching it on the internet. I came up with this
It worked when I saw the error on the console and the path, it was showing, missing some part of it(path)
Path shown on the console:
file:///E:/dist/img/model-1.jpg
So, I just provided the missing part and it worked.
I want to set the <img>'s height to use <h1></h1>'s height.
For example: the <h1></h1> height is 10em, so I want the <img>'s height is 10 em as well.
But the problem is I don't know the exact height of <h1></h1> on each web browser.
I tried to set <img>'s height in percents but it did't work. What should I do?
Here is my original code:
<div class="row" style="margin-top: 1%;">
<div class="large-9 columns">
<h1><img src="img/UnionJR.png"> English</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="large-3 columns">
<img src="http://placehold.it/350x150&text=Img">
</div>
</div>
Thanks
I tried this and this kind of works for Chrome. (I haven't tried with the others)
<h1><img src="img/UnionJR.png" style="height: 1em;"> English</h1>
It seems like a bad way to slove this problem but for brief work it will do.
Anyway, I still want to know other methods. Please add more!
Unless I'm missing something here, if your h1 has a specific height set e.g.
h1 {
height: 10em;
}
you should be able to use
h1 img {
height: 100%;
}
Percentage heights do work if their parent element has a specific height set.
Just tried this in chrome and it works - the image takes the height of the h1.
<html>
<body>
<div class="row" style="margin-top: 1%;">
<div class="large-9 columns">
<h1><img src="http://placehold.it/350x150&text=Img"> English</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="large-3 columns">
<img src="http://placehold.it/350x150&text=Img">
</div>
</div>
<style>
h1 {
height: 10em;
}
h1 img {
height: 100%;
}
</style>
</body>
</html>
I know this question is old, however I want to answer this for anyone looking for a solution like I was.
A solution I found worked was to use this css
.imgh1 {
background-image: image.png;
background-repeat: no-repeat;
background-size: contain;
}
And apply it to your header like this
<h1 class="imgh1"> </h1>
I would suggest setting a class for both the <h1> and the <img> tag.
Something like
<h1 class='tall'>
<img class='tall' src="img/UnionJR.png">
English
</h1>
with a style:
.tall {
height: 800px;
}
Keep in mind, however, that using em means that nested elements (if height is defined with em) will multiply by their parent height. So if your heading is 10 em, and your img is 10 em, the image will actually display at 100em or height. (10x10).
I would suggest using a pixel based height in this scenario, since it won't compound the way the em does.
You could add some rule to your CSS file for specific browser and overwrite the any style originally applied:
h1 {
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
You can use a fixed height for the <h1> tag and apply height: inherit; max-height: 100%; min-height: 100%; to the image to always keep them of same height. Just keep note that your image should be of specific dimensions to avoid the blurring on applying min and max height styles.
img {
height: inherit;
max-height: 100%;
min-height: 100%
}
h1 {
height: 50px;
}
DEMO
I'm trying to use png images as separators in a web page but they don't appear. Am I missing something? And if I had to forgo the images how would you do it instead? Many thanks.
I have the following HTML:
<tr>
<td align="center">
<img class="Separator" align="center" style="width:70%" />
</td>
</tr>
and the following CSS:
.Separator {
background: url('/ct/images/L/Separator.png');
}
Just a regular ol <hr> tag will suffice - JSFiddle Demo
HTML
<p>Lorem ipsum dolor sit........rna, quis interdum orci rutrum quis.</p>
<hr>
<p>Sed mollis urna me............imperdiet ac augue. </p>
CSS:
hr {
border:0;
height:20px;
background:url("http://lorempixel.com/400/200/sports/") 0 0;
}
If the separator is merely a horizontal line, you can use the <hr/> tag in your HTML.
The purpose of the tag is to separate sections, and it should solve your problem aesthetically while providing the correct semantic tag (good for SEO and/or screen readers)
It's always important to remember that Google doesn't know what your image is of, but it knows that <hr/> is there to mark a separation.
Don't set background for img element... Do it with div:
.Separator
{
background: url('/ct/images/L/Separator.png');
width: 70 % ;
}
...
<div class="Separator"></div>
Try using
.separator:after {
content: url(image.jpg);
}