I am trying to make a responsive site using skel.js and skel-panels.js. Basically what these libraries do is allow you to make breakpoints for the screen size and allow you to put content in hidden panels when the screen size changes.
I have an image covering the background of a container div. The problem I am having is that when I try to change the size of the screen, the background image does not "include" the new element that is inserted via skel-panels.js, therefore becoming smaller than I want it to be.
My markup:
<div id="intro">
<!-- Nav -->
<div>
<nav id="nav">
Home
About
Blog
Contact
</nav>
</div>
<div class="container">
<!-- Header -->
<div id="header">
<h1 id="title">Title</h1>
<img id="logo" src="images/logo.png">
</div>
<div>
<section id="hero">
<h2>Title</h2>
<p>Catchphrase!</p>
Join the Fight
</section>
</div>
</div>
</div>
My CSS:
#intro {
background:url(../images/bg.png) top center no-repeat fixed;
position: relative;
background-size: cover;
text-align: center;
color: #fff;
}
This is what this looks like:
Fullwidth - [1]: http://i.imgur.com/pFpcn3m.jpg
Narrow View - [2]: http://i.imgur.com/ZIA3nMt.jpg
It looks like the markup gets messed up when a new div is inserted (nav button in the narrow view). Any insights would be greatly appreciated.
try
#intro {
background: url(../images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I have some issues with particles-js, firstly, it does not cover the whole page. Secondly, I cannot interact with the particles for some reason.
This is the code for HTML:
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my css for particles-js:
#particles-js{
position : absolute;
width:100%;
height:100%;
z-index:-1;
background-image: url(gfx/testback.png);
}
[1]: https://i.stack.imgur.com/XO6w5.png
It's really easy to cover all the page with particle-js like my website: https://askianoor.ir
You should add a div with height 100
Edited Version :
<body>
<div class="h-100">
<!-- PARTICLES-->
<div id="particles-js">
<div class="position-absolute w-100">
Place your text here !
</div>
</div>
</div>
</body>
and in CSS :
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url(gfx/testback.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
I have a css that displays an image in the left bottom corner:
body {
background-image: url(../img.png);
background-size: 5%;
background-repeat: no-repeat;
background-position: 3% 95%;
}
I want to be able to open a web page in the new tab once clicking on that image. Is there any way to achieve that with javscript?
In that case I am using a revealjs so the general structure looks like
<body>
<div class="reveal">
<div class="slides">
<section>
</section>
</div>
</div>
</body>
Get rid of the CSS on the body tag and include a image tag into the HTML.
.img
{
left: 0;
bottom: 0;
position:fixed;
}
<html>
<body>
<a href="https://www.w3schools.com/tags/tag_img.asp">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/4/49/LACMTA_Square_Orange_Line.svg" alt="image at bottom">
</a>
</body>
</html>
Here is an example of a div element that sits in the bottom left, that is wrapped in a element that will link you to the "href" specified.
You cannot assign a link to background image, but you can to an element that has the background of your choosing.
Hope this helps :)
HTML:
<a href="http://google.com">
<div id="corner-img"></div>
</a>
CSS:
#corner-img {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
bottom: 2px;
left: 2px;
}
I have a website where I am displaying campsites. However, I want to resize my thumbnails on the homepage so they are all the same size in a way that the images takes up the exact same dimensions.
Hoempage
The code for my page is :
<div class="row text-center" style="display:flex; flex-wrap: wrap;">
<% campsites.forEach(function(campsite){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img id="homegrid" src ="<%= campsite.image %>">
<div class="caption">
<h4> <%= campsite.name%> </h4>
<h5><em><%= campsite.location %></em></h5>
</div>
<p>
More Info
</p>
</div>
</div>
<% }); %>
</div>
I tried the following but it doesn't work :
.thumbnail #homegrid
{
width: 100%;
height: auto;
display: block;
}
To do this most uniformly, I typically use css's background image properties. Instead of a <img>, you use a <div> with the style background-image set like:
background-image: url("/assets/s_thumb.png"); // can be set inline
My css for that div is normally:
width: 100%;
height: 165px;
background-size: 145% 145%;
background-repeat: no-repeat;
background-position: 50% 50%;
Which is making the div conform to the width of the card, setting the height of the image, zooming it slightly (to account for different aspect ratios), and centering it.
Could someone please explain me how I can make this div responsive using media queries? It's practically a 200px high div with sponsor logos on it. I want it to be responsive. Currently the logo's are displayed horizontally but for example, they should be stacking one on top of the other on the mobile version.
<div id="sponsors">
<a id="about" class="smooth"></a>
<div class="sponsors">
<div class="row row-centered">
<div class="col-md-4 col-centered" style="margin-top: 40px; ">
<img src="img/bridgestone.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;";>
</div>
<div class="col-md-4 col-centered" style="margin-top: 40px;">
<img src="img/sparco1.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;">
</div>
<div class="col-md-4 col-centered" style="margin-top: 10px;">
<img src="img/redbull.png" class="hvr-pulse" style=" width: 300px; margin-bottom: 20px;">
</div>
</div>
</div>
</div>
#sponsors {
width: 100%;
height: 200px;
background-color: black;
background-repeat: no-repeat;
background-size: cover;
}
Change your sponsors height to min-height like this:
#sponsors {
width: 100%;
min-height: 200px;
}
Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/97/ [Dummy images use]
P.s. as you might have noticed in the fiddle, the inline margins are removed because you can achieve what you want by adding some padding to the box wrapping the images.
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
HTML:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
CSS:
#media screen and (min-width:761px){
div.sponsers{
background-color:black;
background-repeat: no-repeat;
background-size: cover;
}
}
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
There is one good website as well https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
i have a refference like this
http://reverzo.tymberry.com/
my code is like this
<div id="multiscroll">
<div class="ms-left">
<div id="home-left" class="ms-section slide-item full-width full-height fullscreen">
<!-- <div class="container"> -->
<p style="font-size:10em;">Lorem ipsum.</p>
<!-- </div> -->
</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div id="home-right" class="ms-section"></div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
#home-left{
background-image: url(http://www.reverzo.tymberry.com/wp-content/uploads/2014/08/furgona-home.jpg);
}
.slide-item.fullscreen {
width: 200% !important;
}
.slide-item.full-height {
height: 100%;
}
.slide-item.full-width {
/*width: 100%;*/
position: relative;
overflow: hidden;
}
.slide-item {
display: block;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-origin: border-box;
background-repeat: no-repeat;
}
#home-right{
background: transparent;
}
heres my work
https://jsfiddle.net/ob1k3vut/
i wanna set the home image like that. its full screen. but when i scroll. the bakground didnt split. how to do that. it can make it full screen. but when scoling they still stick together.
i cant make the fiddle because i dont know the url of js and css of multi-scroll. so sorry guys. if you gus know the link off online css and js multiscroll, feel free to tell me. ill create it so u can check it