So I can't figure out how to get this jumbotron div to have the specified background image. It worked before when I had it in another project but when I imported it to another one it just stopped showing up. Everything else works so I though that I just forgot a css style or something but I tried that and I can't seem to locate any errrors. I am using bootstrap but having edited any of the values from that library and it seem to have worked fine in the other project. One thing that might be causing would the version of bootstrap I got this segment of code from a Bootstrap Version 3.0.0 currently I am using Version 3.3.4. Not sure if that has anything to do with it though. As a last note the image works because I have it showing up for different divs on the page.
HTML
<div class="jumbotron">
<div class="container">
<div class="topTitle">
<div>
<div class="col-lg-9">
<h1>Insert <span>Topic</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
background: url('images/intro-bg.jpg') !important;
background-attachment: fixed !important;
}
.jumbotron p {
padding: 20px 0;
}
.jumbotron .topTitle h1 {
margin-top: 50px;
}
Result
So I figured it out. I used the developer tools like how Jim Garrison said to and it revealed that there was nothing overriding it so it should work. So I randomly tryed to put the style in directly into the html like so
<div class="jumbotron" style="background: url('images/intro-bg.jpg'); background-attachment: fixed;">
For whatever reason this appeared to work so I hope whoever in the future has this problem can be helped by this..... or come up with a better solution.
Related
I'm designing a website and i'm trying to center elements vertically in a div following this tutorial https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_center-vertical.
The content technically does get centered. Problem is: the content div gets higher than the content itself, so in reality it's not completely centered, giving problems in mobile screens.
Unluckily have no idea how it happens or how resolve it.
Html section:
<div class="banner-item-content">
<img src="https://alto.7180.eu/modules/custombanners/views/img/uploads/b09df371daff098e783367d788f96a20731083b9.PNG" alt="Banner1" class="banner-img">
<div class="custom-html"> <!--div to center-->
<h1 style="text-align: left;"><span style="color: #ffffff;">Prodotto 1</span></h1>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p style="text-align: left;"><span><span>SHOP NOW</span></span></p> </div>
</div>
</div>
CSS that does the centering:
.banner-item-content div.custom-html{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's the link to the website to check it directly: https://alto.7180.eu/it/. You can see the problem in the first banner that says "Prodotto 1" (skip the slider).
I would just like to understand which way i can avoid having this empty space included in the centered div, thanks!
Add display flex to banner item content , it will align center.
.banner-item-content {
display: flex;
}
I have a section which is devided by 2 parts. Left side is only for image and right - only for article. Is my code correct?
<section>
<h1>Section header</h1>
<div style="float: left;">
<img src="#" alt="somepic" />
</div>
<article style="float: right;">
<h2>About me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</section>
Yes, your markup structure is perfectly acceptable. An HTML5 section element can be used at your discretion to contain content related to a particular topic or activity. There are no specific rules about what elements it may include. You might use figure for your image wrapper as well. MDN
I recommend against using floats (which often lead to unpredictable or undesired behavior) and inline styles (which are just messy), though. Instead, set your elements to inline-block and give them explicit (percentage) widths using CSS classes in an embedded style tag or an external stylesheet.
The issue I'm having is that my when mobile users double tap to zoom in on content in my right container, the left container which I've set as fixed, jumps in front of the zoomed content. I'm at a loss how to correct this.
CSS
#left_container{
position: fixed;
float: left;
}
#right_container{
float: left;
color: white;
width: 75%;
max-width: 600px;
font-size: 1.5em;
margin-left: 210px;
}
HTML
<div id="left_container">
<div id="header">
<center><h2>Hello World</h2></center>
</div>
<div id="globe">
<img src="http://us.123rf.com/400wm/400/400/Kmitu/Kmitu0706/Kmitu070600073/1126687-globe-isolated-on-pure-white-background.jpg" width="200" height="200">
</div>
<div id="navigation_buttons">
<ul>
<li>HOME</li>
<li>PROJECTS*</li>
<li>BLOG*</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="right_container">
<h1>Content</h1>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
There are some things you need to learn about positioning an element to fixed..
First off, any element that is set to fixed or absolute will need a value for [ top andleft ] OR [ bottom and right ]. Note: float:left; won't affect a fixed element, you meant to use left:0;
Second, a fixed or absolute positioned element will overlay any static (default position) positioned element.
SO what's happening is, when the user zooms in, the window scope gets smaller, causing your fixed element to cross over more area of the screen.
What you need to do is, either make your design responsive using Javascript/jQuery, this way you can foresee the ocation of an user 'zooming' in.
The other way you can do this is by giving your fixed element a right of 0 and nesting it inside another element with and a position of relative... this will bind your fixed element and restrict it's bounds.
You might want to read up on the position property http://www.w3schools.com/cssref/pr_class_position.asp
so i have my index.html and a canvas.css
body{
}
#canvasHIPPO{
display:block;
margin:0px auto 0px;
width:100%;height:100%
background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}
in my index.html:
<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>
I would like to know how to:
1) center the canvas ontop of the background city image, despite 2) different screen sizes and/or 3) maintain the same aspect ratio.
I was pretty sure the margin:0,auto should have fixed the (1) and centered the canvas ontop of the background image...what am i missing?
Thanks!
Are you trying to centre the image horizontally or vertically?
If you are centring it horizontally, in your css it should be:
#content {
background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}
#contentHIPPO {
margin: 0 auto;
display: block;
width: 800px;
height: 600px;
}
and in your html:
<div id="content">
<div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
This will cause the div to be centred horizontally, with the image repeating in the background. If you want the image to be re-sized to the browser window, you would need to use javascript to get the size of the window.
Why not you use
display: webkit-box;
The new css3 provide more properties follow the tutorial
http://www.w3schools.com/css3/default.asp
If it's a small project, you can always convert your hex colours (#FFFFFF) to RGB and Alpha (where the alpha channel is transparency), which looks something like this rgba(255,255,255,100). However, if you've got hundreds, or even thousands, of instances of colour references, you're probably better off Googling a tutorial.
I am trying to put an image as the background and would like it to align to the right, but not closely align to. Something like margin-right:10px. Is it possible to do that in pure css, without explicitly adding a margin to the image?
I had several attempts, but all failed...
http://jsfiddle.net/cA7Un/1/
Thanks in advance!
You could use a percentage, but this is only good if you know the width of the container will stay the same:
background-position: 95% center;
Otherwise, you could add 10 pixels of whitespace to the right of your image in an image editor like Photoshop.
To use the example you put on jsfiddle:
I declared the following extra style:
.rss
{
background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
background-repeat: no-repeat;
float: right;
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 10px;
}
This uses the same image, but adds an extra div to your your markup. This method gives you the image as a background image, and then with the margin you can position it as far from which ever side you want (by also changing the float if you want it on left hand side).
<div class='test' style='width: 300px; height: 100%'>
<div class="rss">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
The positioning of the "rss" div before you normal markup is important as this affects the flow. Could also do it by positioning the div absolutely with a relative parent.
Finally I deleted the background from the ".test" class, as it has now been moved to the "rss" class.
I hope this helps.