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.
Related
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! :)
I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
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.
How can I get an iframe to load the whole page into the next page?
I am a N00b html coder and i was wondering
<center>
Home
<hr>
and loaded it into an iframe, and click on it, it loads inside of the iframe. I want it to load on the entire page.
If I understand you correctly, you want an iframe on a page, but when the iframe is clicked on, you want the page in the iframe to open in a new tab. This is what I did to do this:
<!DOCTYPE html>
<html>
<head>
<style>
div.iframe-link {
position: relative;
float: left;
width: 730px;
height: 330px;
margin: 0 1em 1em 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="iframe-link">
<iframe src="http://en.wikipedia.org" width="750" height="350">
Your browser does not support iframes.
</iframe>
</div>
</body>
</html>
In this iframe, you can still use the scrollbars, but you cannot do anything in the iframe without going to that page. Change the width and the height in div.iframe-link to change the size of the hyperlink part of the iframe. My example has Wikipedia instead of Google.
:)
Also, if you do not want the iframe link to open in a new tab, just change
to
If I understand it correctly, you want to be able to click on a link inside an iframe and open it in the entire window?
In that case you will need to specify a target on your link, as such:
Home
This will make sure that the top frame (i.e. the window) follows the link.
Try this. For me it works
<iframe src="http://www.google.com"></iframe>
I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode
Edit 1: The image, html file and css file are all inside the same folder. Yet no success.
Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.
HTMl code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>alert message</title>
</head>
<body>
<p class="alert">
<strong>Alert!</strong>
This is an alert message.
</p>
</body>
</html>
CSS code:
.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
The url must be a string:
url("C:\Documents and Settings\USER\My Documents\alert.png");
I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
}
Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:
<div class="alert">
<p>
<strong>Alert!</strong>
This is an alert message.
</p>
</div>
And, for the CSS:
.alert {
width: 20em; (Width of entire div, which includes text and bg image)
background-image: url('../alert.png');
background-color: orange;
margin: auto;
padding: 2em;
}
You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/
Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put background-repeat: no-repeat in your css under the .alert class.
Hope this helps and good luck!
Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.
Else another solution would be give height to your alert class as follows
.alert {
width: 20em;
background-image: url('/alert.png'); /* '/images/alert.png' */
background-color:orange;
margin: auto;
padding: 2em;
height: /* height of image*/
}
First put your alert.png picture in the same folder as your html file.
Then try this in your CSS file:
body {
background: orange url("alert.png") no-repeat;
}
I think the problem was the "\" in \alert.png
Good luck!
In the original question he had in his css
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.
A\ space\ in\ the\ filename.jpg
though this might not work in a Windows pathname!
If the image is in the same directory as the script he shouldn't need the full url anyway.