I want to put the transparent light image on background color for making a good effect
i don't know why the light image didn't display
its what i have done :
http://jsfiddle.net/4pbq2tx8/2/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
</div>
</body>
</html>
css :
#carousel
{
border:solid 1px #1a1a1a;
position:relative;
width:922px;
height:221px;
margin:0 auto;
margin-top: 50px;
display: block;
background-image:url(light.jpg);
}
body
{
background-color: #c7c7c7;
}
As I stated in the comments, the reason why your externally 'loaded' image is not showing up in your fiddle is because of the fact that external resources are only for loading css or javascript files.
Indeed, this becomes obvious when inspecting the source of the included iframe:
As the image is included in the page as a javascript file. If the type is unknown(eg, not being css or javascript), the file is loaded as javascript, as noted in the previously linked documentation.
In order to properly load such an image, you need to supply the full url in the actual css of the fiddle. Example:
#carousel
{
border:solid 1px #1a1a1a;
position:relative;
width:922px;
height:221px;
margin:0 auto;
margin-top: 50px;
display: block;
background-image:url('http://s4.postimg.org/590qvkilp/light.png');
}
DEMO
The external resource you included is loaded from another website s4.postimg.org/590qvkilp/light.png
Because the image is not in the same location you need to include that full location.
background-image: url(http://s4.postimg.org/590qvkilp/light.png);
DEMO here
Related
I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
[Answered]
the style of the body of the website I made is overwriting color variables I use to implement themes to my website. The problem is that the style is not in my code. I only changed the color values on the :root{}, first I thought it might be some caching issue but rebooting my computer doesn't work.
here is an image of my problem, what is weird to me is how some variables are spelled differently:
I wonder where the CSS in the purple box is coming from.
here's my relevant code:
css:
:root {
--primary-color: #fff;
--secondary-color: #f2f2f2;
--tertiary-color: #333;
--quaternary-color: rgba(238,238,238,0.2);
--quinary-color: #000;
--senary-color: #000;
--septenary-color: #000;
--octonary-color: #000;
--nonary-color: #000;
--denary-color: #000;
--highlights: #4CAF50;
--warnings: #F00;
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
background-color: var(--primary-color);
}
html (in php):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./includes/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="./includes/jquery-3.1.1.min.js"></script>
<style>
body{
background-image: url("BG.png");
background-repeat: no-repeat;
background-size: auto;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="navbar">
</div>
<div id="sidenav">
</div>
<div id="content">
</div>
</body>
</html>
the file structure looks like the folowing:
web[
includes[
main.css,
jquery-3.1.1.min.js
],
index.php,
BG.png
]
^if that makes sense
In the rest of my code no style tag is used to asign CSS, as said I tried rebooting, I got disable cache checked, Incognito doesnt work, commenting the cdnjs.cloudflare.com CSS out also has no effect. If you want any more info please ask.
Thank you very much for taking your time to read this!
I had this bit of js, which I completely overlooked:
<script>
function setColorTheme() {
document.body.style.setProperty('--primary-color', "#fff");
document.body.style.setProperty('--secondary-color', "#f2f2f2");
document.body.style.setProperty('--tertiary-color', "#333");
document.body.style.setProperty('--quaternary-color', "#eee");
document.body.style.setProperty('--quinary-color', "#000");
document.body.style.setProperty('--senary-color', "#000");
document.body.style.setProperty('--octonary-color', "#000");
document.body.style.setProperty('--nonary-color', "#000");
document.body.style.setProperty('--denary-color', "#000");
document.body.style.setProperty('--highlights-color', "#4CAF50");
document.body.style.setProperty('--warnings-color', "#F00");
}
</script>
I am sorry for asking this question, some say there's no such thing as a dumb question, this one proved em wrong.
Thanks to #Stephen P for pointing out it could be added by js.
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
I cannot get this background image to appear. It is supposed to appear in the background with the header overlapping it. I'm using an id selector. I literally copied this straight from the book i have for my class and it's not working at all.
Here is my code. I'm very new to css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fall Nature Hikes</title>
<style>
#content { background-image: url(fall.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 640px;
height: 480px;
padding-top: 20px; }
h1 { background-color: #FFFFFF;
opacity: 0.6;
font-size: 4em;
padding: 10 px; }
</style>
</head>
<body>
<div id="content">
<h1>Fall Nature Hikes</h1>
</div>
</body>
</html>
In my browser it works right for another image, you can check the url(fall.jpg) path is right？
I checked, your code can show the image, you can see this sample:
> https://jsfiddle.net/a9qm1j2t/
It's just copy all your html and css source code.
I think you should check image path and image type again, and make sure it's right.
May be your image path is not proper.
First check where is your css file and image file.You can verify your image path by inspecting your code on browser and in style check your image path.
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.