i am trying to build a simple landing page for my website on bigcartel.
i am trying to get it so that a fullscreen image takes up the whole page and directs to the product page after being clicked
after tons of research this is what i have come up with
<head>
<a href="/products">
<img title="click to enter" src="http://i.imgur.com/QC0IqJ9.gif"
style="width: 100%"; style="height: 100vh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<
body {
background: src="http://i.imgur.com/QC0IqJ9.gif" ;
background-size: 100% 100%;
}
-->
<a {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}>
</style>
</a>
{{ head_content }}
</head>
my problem is that i cannot get the image to stretch and fit depending on the browser resolution
You have some really strange tags within your <style>, but I'm assuming they're part of Scrapy-Splash. The problem is specifically with your line background: src="http://i.imgur.com/QC0IqJ9.gif";. You're setting CSS, so you don't set the src, you set a url() as such:
body {
background: url("http://i.imgur.com/QC0IqJ9.gif");
background-size: 100% 100%;
}
<body>
</body>
Hope this helps! :)
Related
I was creating a very simple HTML page with a full-size background, however, my background picture displayed as broken when I loaded the page. Does anyone have any idea of why this is happening please? Thanks!
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bgimg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0.8;
}
.vdeo {margin: 10% 8%; }
</style>
</head>
<body>
<img class="bgimg" src="https://wallpaperclicker.com/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper/20306228/">
<iframe class="vdeo" width="600" height="345" align="middle" src="https://www.youtube.com/embed/XXXXXXXX?autoplay=1&controls=0"></iframe>
<script>
for (var i=0;i<4;i++) {
alert(
(i===2)?"Happy Birthday, dear Hub Hub!":"Happy Birthday to YOU!"
)
}
</script>
</iframe>
</body>
</html>
And my page looks as in the picture:my page
You're trying to load a web page as a background image.
https://wallpaperclicker.com/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper/20306228/
Unless you're using a server application to select and serve an image, your src attribute value should end with an image filename extension, such as .jpg or .png.
You can't just put the link to the site with the picture, you need the link to the picture. (In your case it's https://wallpaperclicker.com/storage/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper-20306228.jpg) Try it with the direct link to the picture.
You're using a URI on the src attribute value that renders an entire web page, if you want to use the image inside that web page, you should use the image URL.
In this case I guess it is: https://wallpaperclicker.com/storage/wallpaper/HD-Happy-Birthday-Cartoon-Wallpaper-20306228.jpg
If you're not managing the routes of that website, you can right-click then inspect and see the image source.
I've tried displaying an image like this in every possible way I can think of:
1. links to a website like it is now
2. having the image be local: bird.png
3. i always double check the name of the image is right and the extension
4. ../images/bird.png
etc.
Any help is appreciated
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title> Internal Affairs Inc. | When Information Really Matters </title>
<style>
#logo
{
background-image:url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
}
</style>
</head>
<h1>ho</h1>
<body>
<div id="logo"></div>
</body>
</html>
The div doesn't have any dimensions. 0 height. Add some height of 302px as the image is 302px high:
#logo {
background-image:url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
height: 302px;
}
<div id="logo"></div>
Your div has no dimensions, so is 0x0 and a bg image is not visible. Try:
#logo
{
background-image:url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
width: 592px;
height: 302px;
}
The following CSS showld put the logo right in the middle as the margins are pushed by the same value from both left and right, and top and bottom, however, this happens only on firefox for some reason that I obviously don't have a clue of.
body {
background-image:url(Background.png);
background-size:100%;
background-repeat:repeat-y;
} /*backgroung*/
.logo {
left:0;
top:0px;
right:0;
bottom:0px;
position:absolute;
min-width:444px;
margin: 230px; 400px;
text-align:center;
} /*logo positioning*/
.logo {
background-image:url(Logo.png);
background-position:center;
background-repeat:no-repeat;
} /*logo image*/
.logo:hover {
background-image:url(Logo2.png);
background-repeat:no-repeat;
background-position:center;
} /*mouseover*/
Do you have a link we can check?
Try using “padding-top: 150px”. It usually works unless there is something that is keeping you from doing it. Or, try the regular trick “ zoom: 1”,”position: relative”, “display: block”.
Hope this helps.
in your css try to add height. that should fix the issue.
.logo {
left:0;
top:0px;
right:0;
bottom:0px;
position:absolute;
min-width:444px;
min-height:some xyz px;
margin: 230px; 400px;
text-align:center;
} /*logo positioning*/
I have included another div and created Pen.
This is the HTML as follows, and I am also posting the full CSS. The social icons I put in (facebook and twitter) respond perfectly in any browser. The logo's margins seem to be cut as I indicate in the CSS only if read with firefox. I have tried to specify the height but had the issue anyway.
If you know any trick that will work in any browser just explain me because I've been around CSS and HTML only for a week, so I know the normal commands but don't know many tricks, so I'd love to understand those tricks and why they work rather than normal css attributes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LoD</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="shortcut icon" href="Favicon.ico" />
</head>
<body>
<div id="container">
<a href="Index.html" /><img class="logo" />
<ul id="social">
<li class="facebook";><img src="Facebook4.png" style="width:80px; height:73px;" onmouseover="this.src='Facebook2.png';" onmouseout="this.src='Facebook4.png';"/></li>
<li class="twitter";><img src="Twitter.png" style="width:80px; height:73px;" onmouseover="this.src='Twitter2.png'"; onmouseout="this.src='Twitter.png';"/></li>
<li class="plot";><img src="Plot.png" style="width:140px; height:73px" onmouseover="this.src='Plot3.png'" onmouseout="this.src='Plot.png'" onclick="this.src='Plot2.png'" /></li>
</ul>
</div><!--closes container-->
<footer id="copyright">
<p>© Giorgio Vitanza</p>
</footer>
</body>
</html>
Ok I fixed it! Apparently margin: [value in pixels] [value in pixels], with no ";" in between, fixed the issue in any browser. Strange but true
The problem is now, that when I zoom down the pic doesn't hold its central position.
I have used a container in my HTML page, where i used a background image.
I want to put some text on top of my background image, and print it.
But When I use :
Print
I dont get my background image at all.
this is my code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div id="headerbg">
<h1><p>DATA</h1>
</div>
<div id="container">
<p id="address">
adress is XYZ
</p>
<p id="ward">
Ward is 7
</p>
</div>
Print
<div id="footer">
</div>
</body>
</html>
The css I used is:
#headerbg {
background:#E8E8E8;
text-align:center;
height: 80px;
}
#headerbg p{
margin: 0;
position: absolute;
top: 5%;
left: 40%;
margin-right: -50%;
}
#container
{ background-image: url("notice.jpg");
height:680px;
width:1000px;
background-repeat: no-repeat;
margin-top:10px;
margin-left:390px;
position:relative;
}
#address
{
z-index:100;
position:absolute;
color:black;
font-size:19px;
left:10px;
top:225px;
}
How can I make my background image printable? please help me!
Add media print:
<link rel="stylesheet" href="" media="print"/>
or, you can set in css, as in:
#media print {
body {
content:'url(../imagez.png)';
}
}
note: some IE not work by using that, you can use:
#import 'style.css' print;
If you are using Windows 7, when the print dialog appears, there is an option called More Settings below the option Color. Click on that and you will see a check box called Background Graphics. Tick that and you will see the background image.
Also, for Chrome and Safari you can add the following in your CSS:
#media print
{
* {-webkit-print-color-adjust:exact;}
}
This will print the background image even if the option is not selected in the print dialog. For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)
I'm setting a landing page for My new website
I've created an image, and I'm setting it as the background image. Unfortunately, I can't seem to figure out at all how to get it to be full screen, and scrollable - so you can just scroll up/down to see the full image - but without having any white spaces or anything.
<!DOCTYPE html>
<html>
<title>On The Ropes Boxing! Coming Soon!</title>
<body>
<style>
html {
height: 100%;
margin:0px;
background: url(comingsoon.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: relative
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
<img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
</body>
</html>
That is what I have so far. I'm completely new to HTML and CSS, so I'm basically just learning on the job and going through trial and error. I fully expect to be told I'm doing this completely the wrong way. Any advice is appreciated - just be aware that I may need to be told as if I'm an idiot :)
Thanks so much.
Replace the img tag in your code with this:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
And move it out of the style tags.
Before I get into the answer, allow me to correct your code first.
The basic format for a webpage is this:
<!doctype HTML>
<html>
<head>
//Titles, scripts, styles, etc.
</head>
<body>
//Everything else, can also hold scripts and styles.
</body>
</html>
You're missing a head in your code.
Second, don't place html tags inside style tags (referring to your img).
As for your question,
<!DOCTYPE html>
<html>
<head>
<title>On The Ropes Boxing! Coming Soon!</title>
<style>
html, body {
height: 100%;
width: 100%;
margin:0px;
border: 0;
}
.splash {
width: 100%;
z-index: 0;
}
//Rest of styles
</style>
</head>
<body>
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
</body>
</html>
Putting the image as the background won't work, as the page won't have anything to scroll to. Putting the background as an image will allow the page to scroll.