UPDATED The white bar is still there, however, the white bar is smaller and so is the image (the image is within the white bar) and the white bar stretches across the whole page. The white bar is above the particles.js and its background.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='css/style.css' rel='stylesheet' type="text/css">
<title></title>
</head>
<body>
<div id="wrapper">
<center>
<img class='' src='img/kaylumlogo.png'></img>
</center>
</div>
<div id="particles-js"></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
</body>
</html>
CSS:
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("http://i.imgur.com/5F64MpH.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#wrapper {
border: 0;
width: 200px;
}
img {
width: 200px;
}
Some of your tags are not close, some are closed incorrectly.
We always close a link tag within the tag with "/"
<link ... />
Same with images
<img ... /> instead of <img ... ></img>
I think "< center >" is deprecated.
With good semantic everything is possible.
It might solve your issue
Related
The image is fine if it's not full screen, but with full screen, there's a white area on the right (probably because the image is not large enough). How do I make the image automatically stretch so that its width covers the full screen?
CSS (see .landingImage):
.body {
margin: 0px, 50px;
}
.home {
margin-left: 20px;
margin-right: 20px;
padding: 5px 5px;
}
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
margin: 0 auto;
width: 100vw;
}
index.js(built using nextjs):
<Head>
...
</Head>
<div id="wrapper">
<Image className={indexStyles.landingImage} src={orcas} />
</div>
<div className={indexStyles.home}>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
></meta>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
></link>
</Head>
<body>
...
</body>
</div>
tried width: 100% also didn't work
from the doc
When using layout='fill', the parent element must have position:
relative
This is necessary for the proper rendering of the image element in
that layout mode.
What can you do is :
CSS :
add relative to the landingImage class and remove margin auto
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
width: 100vw;
position: relative;
}
Wrap Image on the div
<div className='landingImage '>
<Image
layout='fill' // required
objectFit='cover' // change to suit your needs
src='orcas' //
/>
</div>
I am new to building Web pages. Just for training, I made a really simple site but, I don't understand why I can't change text size.
If I delete background image code works, but I can't do that like this:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("h1, p").addClass("dark");
$("div").addClass("important");
});
});
</script>
<style>
body,
html {
height: 100%;
}
#grad1 {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
p {
font-size: 28px;
}
.important {
font-weight: bold;
font-size: xx-large;
}
.dark {
color: dark;
}
</style>
</head>
<body>
<div id="grad1">
<div class="container">
<h1 align="center">Dzīves jēga</h1><br><br>
<p align="center"><dfn>“Dzīves jēga nav gaidīt, kad beigsies
negaiss..
bet gan iemācīties dejot lietū!”</dfn></p>
<button type="button" class="btn btn-lg btn-info">Izmaiņas ir
neizbēgamas</button>
</div>
</div>
</body>
I just cant figure this out siting here for 2 days.
The issue was because you did not have the closing bracket for #grad1 style.
Change style to -
#grad1 {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is the JS Fiddle
I am new to javascript and i am trying to create a game in that. I have placed an image but when i resize the browser like zoom in and zoom out with CTRL + or CTRL -, the position and size of my image also changes according to it. i want my image's position and size to be fixed. I am trying to find the answer on google but haven't found a single one working for me yet. Any help would be appreciated. i want to fix the postion and size of image with id "bb1".
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("Assets/Game_Background.png");
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<title>Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg">
<button onclick="window.location.href='Main_Menu.html';" style="position: relative; ;background-
color: rgba(0,0,255,0); outline: none; border: none; opacity: 1;transform: translate(500px,220px);
width: 150px; height: 80px; "><font size="4" color="White"></font></button>
<div class="imageWrapper" style="transform: translate(700px,200px);" >
<img class="overlayImage" id="bb1" src="Assets/Marble_Blue.png" style="position: absolute; display:
block; overflow: hidden; opacity: 1; width: 26px; height: 26px; transform: translate(246px, 37px);
position: absolute;">
</div></div>
<script type="text/javascript">
</script>
</body>
</html>
remove the css property background-size: cover; because that resizes your image when you change your window size (to fit the container)
Source
I have problems with retina.js.
Download images https://yadi.sk/d/VEpe-Kdz35PEfr
Why not apply #2x and #3x images? Why retina.js doesn't work? I've been doing documentation. Why this is happening? How to fix this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
<!-- Uncomment one of the following CSS links to test the behavior of a
different CSS preprocessor.-->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
<script type="text/javascript">
// Spoof the browser into thinking it is Retina
// comment the next line out to make sure it works without retina
window.devicePixelRatio = 3;
</script>
</head>
<body>
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag #1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img src="google-logo.png">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag #2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img src="google-logo.png" data-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag #3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img src="google-logo.png" data-rjs="3">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script>
</body>
</html>
There must be a bug in v2.1.0, I changed the source of the script to 2.0.0 and it works as expected:
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>
I'm just starting to learn about jQuery and I believe I have run into a road block. Essentially what I have is a that represents a clickable area with an inside. So I'm trying to use this code:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
Where #side_menu_icon is the clickable area and #side_menu is just a placeholder with width,height, and color temporarily. By default I've set this <div> to display:none; because the example I was looking at did the same thing, assuming the jQuery function would set it to visible. When I click the area nothing happens, I've tried attaching the #side_menu_icon to both the <img> and the <div>. I think there might be something I don't understand about the and how documents inherit the code from one another so I'll include that as well:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js is the file that calls the jQuery functions above.
Thanks for your time, I hope this is enough information for a solution.
EDIT:
Cut down version of HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
Relavent sections being
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
and
<div id="side_menu">
</div>
CSS:
body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
Relevant parts being #side_menu and #side_menu_icon I guess.
I found the solution to my question, some of the CSS was disrupting jQuery's ability to work properly. I will just have to find some way around that.