My HTML code-
<html>
<head>
<style type="text/css">
{
/*for setting background image*/
background-image: url('C:/Users/SONY/Desktop/CSS/images.jpg');
background-attachment: fixed
}
</style>
</head>
</html>
This code is for setting the background image. But it's not showing the
result. I've not created two files. Like one for CSS and another HTML file.
I've compiled both the files into one.
Why am I not able to see the background image? Despite giving the
correct path for the URL.
You need to specify the element for which want to give particular CSS properties like html, body, .class, #id.
body {
/*for setting background image*/
background-image: url('http://lorempixel.com/400/200/sports/1/');
background-attachment: fixed
}
Here is the link of working fiddle.
You are applying background image to none of the class/id or any html tags like html, body etc. either you need to add a class or id or need to apply style to the inbuilt tags. you can try this
<html>
<head>
<style type="text/css">
html{
/*for setting background image*/
background-image: url('C:/Users/SONY/Desktop/CSS/images.jpg');
background-attachment: fixed;
}
</style>
</head>
</html>
Hope this helps.
I think your code under css folder, so the line should be :
background-image: url('images.jpg');
Use this style in your code. If want to pick image from local computer.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
background-image: url(./images.jpg);
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
Related
I have written this html script to display wikipedia inside iframe but i want to change the background color of it, below is the code snippet which i tried. but its not working.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
</style>
</head>
<body>
<iframe style="background-color:#fc3 !important;" src="https://www.wikipedia.org/" width="100%" height="450px" >
</iframe>
</body>
</html>
You cannot modify the contents of an iframe before loading (using CSS), because it is displaying content from another page. After it loads, you may modify it with javascript.
I'm trying to make an iframe that will display a static image, then load a webpage within the iframe when a user clicks on the placeholder image. It's for a virtual tour, so the image will display the instructions, then view the virtual tour (link) when clicked. I know how to change iframe links using buttons, but for this particular application a clickable image is preferred. I'm fairly inexperienced, so any help is much appreciated!
Just put the iframe in a div, and put the background on the div, then make the iframe transparent, but not its contents.
<!doctype html>
<html>
<head>
<style type="text/css">
.iframeframe { background-image: url("whatever.lol"); margin: 0; padding: 0; display: inline-block; }
iframe { width: 600px; height: 400px; }
</style>
</head>
<body>
<div class="iframeframe">
<iframe src="whatever.lol"></iframe>
</div>
</body>
</html>
I need the image to fit the 50% of the screen height of the device and not 50% of the current screen size (the user might have minimized the screen). Also, when the user resizes the screen, I don't want the image to automatically fit the screen once initially it is rendered.
The image is very large and I am looking to crop it, and not resize it. Here is what I done so far:
home.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<img class="image" src="myimage.jpg" alt="">
</body>
</html>
home.css:
html, body {
margin:0;
border:0;
padding:0;
}
img.image {
width:100%;
}
I don't want to use anything apart from HTML, CSS and JavaScript. It would be great if somebody help me understand how should this be done in CSS. Thanks!
Consider using the css clip property.
Combining clip with a little JavaScript to get the screen size may just be the right solution.
to crop the image, you will need a container with overflow:hidden.
DEMO/example :
html, body {
height:100%;
margin:0;
}
.crop50h {
height:50%;
overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
text-align:center;
}
.crop50h img {
/* width:100%; ? */
margin:0 -100%;
min-width:100%;
}
Wit html basis :
<div class="crop50h">
<img src="http://lorempixel.com/1200/1200/"/>
</div>
If I've read your question correctly, I believe you're asking to set the image to be 50% of the desktop window, not the browser window.
In that case you can use window.screen.availHeight in Javascript to get the available height:
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];
image.width=(half)+"px";
Though I can see this question has been asked before I really need a solution without the use of JQuery, its for an embedded web interface and I don't want the overhead of loading jQuery. I need to be able to manipulate sprites using just the JS on the single page, the state of the sprite is dependent on certain JS variables. I'm sure this must be possible, but can't find anything without the use of JQuery.
The easiest way (I think) is to define your own css classes and change those clasess on certan events. i.e.
<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:center;
}
.bg2{
/* Some attributes set here */
background-position:left;
}
</style>
and then you put your javascript like this
document.getElementById("some_id").class = "bg2";
I think you can use Object.style.backgroundPosition="position" to change your desired background position .
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>
</body>
</html>
Reference
I get a script from a website to put it into my website, but the font color is not what I want.
The script is:
<script language="javascript" src="http://www.parstools.net/calendar/?type=2"></script>
and now I want to change the font color of it. What should I do?
I would really appreciate your help, thanks.
Examining the source of that script, it is simply writing an anchor link with document.write():
document.write("<a href='http://www.ParsTools.com/'>1389/1/31</a>");
You may want to include that script inside a <div>, and then style the anchor links within that <div> using CSS:
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
Then you should also add the following CSS class definition:
div#calendar a {
color: red;
}
The following is a full example:
<!DOCTYPE html>
<html>
<head>
<title>Simple Demo</title>
<style type="text/css">
div#calendar a {
color: red;
}
</style>
</head>
<body>
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
</body>
</html>
I assume you want to change the font colour of the HTML code produced by the script? If so, just use normal CSS in your external stylesheet and it will apply to the added content.
For example, if you want to make the text inside the element myElement a nice blue colour:
#myElement {
font-color: #0099FF;
}
If the script is not your own, then you will want to analyse the code produced by it to work out which elements you need to style in order to change the colour of the text. Many external scripts that you embed in your website contain inline CSS rules, meaning that you will have to override many elements in your external CSS stylesheet to change simple things like text colour. You may also have to add !important to the end of your CSS rule in order to override the inline styling:
#myElement {
font-color: #0099FF !important;
}