I designed a web page using bootstrap studio and all the style attributes are inline. I want to change this and add these to a separate css file. I have trouble doing that, because when i add the image as 'background-image:url('img/pic.jpg'); it doesn't show up. And i don't know how to convert all the following attributes . The following is the code.
<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">
for example what I want is ,
if html code is <div class="intro" style="width:500px;height:400px;">
the code for the separate css should be
.intro
{
width:500px;
height:400px;
}
You can write it in your css file as you did in your question
.intro
{
width:500px;
height:400px;
}
But note to use the right class name in your example it would be
<div class="intro-body"> // and not "intro"
.intro-body {
background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body">"</div>
Then in your .html file you have to include the css file. Add the following line in the head section of your html document.
<link rel="stylesheet" href="yourstyle.css">
Note: Be careful at the href attribute it depends on the filestructure you have in your project.
For instance when your index.html file is in the base folder and the css file is in the directory /styles
index.html
styles
yourstyle.css
Then you have to write
<link rel="stylesheet" href="./styles/yourstyle.css"> inside your index.html file
just copy the inline css and paste this code in css with your class sector .intro-body
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(assets/img/0274207612d515f49012c87803a9e631.gif) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body"></div>
I think you have put css in seperate folder so you are having this issue.
After Separating your css, Change url to relative values.
ie. url('img/pic.jpg') to url('./img/pic.jpg')
.intro-body {
width:500px;
height:400px;
background: linear-gradient(90deg, rgba(8,1,36,0.4), transparent 49%), url('./img/pic.jpg') right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<body >
<div class="intro-body"></div>
</body>
create separate css file and include your css file to html page as follows.
<link rel="stylesheet" href="mystyle.css">
add your css to that file as shown below.
.intro-body {
/*your css goes here*/
}
if the folder structure is :
FolderProject/css/style.css for the css
FolderProject/index.html for the html
FolderProject/assets/img/
The css file:
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("../assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
index.html:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="intro-body">
</div>
</body>
</html>
Related
I'm new to HTML and CSS, I'm trying to add Full Screen Background Image in CSS, but my code doesn't work. I've tried many tutorials as well. Here it's my code.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
and CSS file
body{
background-image: url(""C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg"");
background-size: cover;
background-attachment: fixed;
}
The problem with your double-quotes in the URL you should remove them. Also, you can use a relative path to get your image from your project path.
Here a working example, you made one mistake & one bad practice:
- You used double """" for your background URL
- The CSS link is recommended to be in the head. You can put it in the body but place it add the end.
body{
background-image: url("C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg");
background-size: cover;
background-attachment: fixed;
/* DEMO, remove */ background-image: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg");
/* DEMO, remove */ color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<!-- comment out -->
<!--<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">-->
</head>
<body>
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
style="background-image: url('img_shirjeel.jpg'); height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover;"
try this in that tag or body where you want the image.
and do google first.
You need to move your css file to the main folder (the same as the html file).
And create a div(container were background has to come) that contains your h1.
And you shouldn't use the full url you can just use foldername/imagname.jpg.
So this is how it should look.
Folder.
-html.html
-practice.css
-imagefolder
--image.jpg
If you have this you can change the css link to :
<link rel="stylesheet" type="text/css" href="practice.css">
And then in body tag you creat a div with a class:
<div class="body">
<h1>Welcome to my First CSS page.</h1>
</div>
If you have this you can give the body div a background image with in css:
.body{
background-image: url(image/landscape.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 500px;
}
I need to create a background pentagon for my page header. In order to do this, I:
1) cannot edit the html
2) am doing the styling with SASS.
How do I get the shape to appear like this wireframe image, and without transforming the text? In other words, the middle point of the pentagon must be at the bottom. Here is the compiled CSS and the HTML.
/* Header */
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<!--
View source is a feature, not a bug. Thanks for your curiosity and
interest in participating!
Here are the submission guidelines for the new and improved csszengarden.com:
- CSS3? Of course! Prefix for ALL browsers where necessary.
- go responsive; test your layout at multiple screen sizes.
- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
- Graceful degradation is acceptable, and in fact highly encouraged.
- use classes for styling. Don't use ids.
- web fonts are cool, just make sure you have a license to share the files. Hosted
services that are applied via the CSS file (ie. Google Fonts) will work fine, but
most that require custom HTML won't. TypeKit is supported, see the readme on this
page for usage instructions: https://github.com/mezzoblue/csszengarden.com/
And a few tips on building your CSS file:
- use :first-child, :last-child and :nth-child to get at non-classed elements
- use ::before and ::after to create pseudo-elements for extra styling
- use multiple background images to apply as many as you need to any element
- use the Kellum Method for image replacement, if still needed.
- don't rely on the extra divs at the bottom. Use ::before and ::after instead.
-->
<body id="css-zen-garden">
<div class="page-wrapper">
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
</body>
</html>
You can use multiple linear-gradient like this:
/* Header */
header {
background:
linear-gradient(#000,#000)0 0/100% calc(100% - 70px) no-repeat,
linear-gradient(to bottom left,#000 50%,transparent 51%)0% 100%/50.5% 70px no-repeat,
linear-gradient(to bottom right,#000 50%,transparent 51%)100% 100%/50% 70px no-repeat;
color: #ffffff;
width: 100%;
padding-bottom:50px;
text-align: center;
}
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
For the Zen Garden, you want to get really familiar with pseudo elements. Here's an example: https://jsfiddle.net/sheriffderek/3ykb2k3k
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
<header>
<!-- no markup change... -->
</header>
Lots of ideas here: Is there a way to use SVG as content in a pseudo element :before or :after
header {
min-height: 300px;
background: gray;
position: relative; /* to create a boundary for the absolute children */
}
header:before {
content: '';
/* has to have something in 'content' or :before and :after don't work */
display: block;
width: 100%;
height: 200px;
position: absolute;
/* positioned based on closest relative parent */
top: 0;
left: 0;
background: red; /* could be an image or gradient or many things */
background-image: url('https://am23.akamaized.net/tms/cnt/uploads/2015/04/Revenge-of-the-Nerds-1984-revenge-of-the-nerds-11710197-950-534.jpg');
background-size: cover;
-webkit-clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
/* here's a fun new approach */
}
http://bennettfeely.com/clippy
Another way of doing this is simply use clip-path css property like this
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
padding:60px 0;
clip-path:polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
}
I hope it helps!
I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" text="type/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
This is a test.
</body>
</html>
CSS:
body {
background-image: url(image.jpg) no-repeat;
}
Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?
You can't combine background-repeat in background-image.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Use background background instead of background-image if you are using no-repeat etc.
body {
background: url(image.jpg) no-repeat;
}
According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.
The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.
So here is the code you should use case you actually do not want to see image repeating:
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
your image url is important to give it:
I hope solved with this.
1- in own folder: "./image.jpg"
2- in out folder: "../image.jpg"
3- or root relative path(eg asp.net): "~/pictures/image.jpg"
4- or relative path: "../pictures/image.jpg"
body
{
background-image: url(./image.jpg);
background-repeat: no-repeat;
}
I need repeat as background image gried.png image in welcome.blade.php in My app. I need create class selector file in css folder for this.
this is My welcome.css file in public/css folder
.background-image{
background-image:transparent url("/imgs/grid.png");
background-repeat:repeat;
}
This is my welcomeblade.php file
<link rel="stylesheet" href="/css/welcome.css" />
<div class="background-image"></div>
But this code did not generate any result, how can I fix this?
transparent is not a valid value for background-image. It's a value for background-color.
.background-image {
background-color: transparent;
background-image: url("/imgs/grid.png");
background-repeat: repeat;
}
should work.
See it here (with a different url for the image): https://jsfiddle.net/h0revzu5/
Just try background-attachment:repeat;
Example of background-repeat:
body {
background-image: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
background-repeat: repeat;
}
OR
Also by default it repeats when you set background,
body {
background: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
}
Default background-color is background-color:transparent;
So I'm trying to color a div part of my html with a background gradient that i got from a color generator but for some reason this code won't work.
I'm following css/html tutorials and i'm replicating what their doing but it's not working out for me when i make my own tweaks. See my code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Let's Play</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainbg">this part should have a colored gradient</div>
</body>
</html>
my css is..
<style type ="text/css">
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
</style>
not even a plain background is showing up.. thanks in advance
Remove the <style type ="text/css"> and </style> tags from your CSS file leaving you with:
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
You say that your css is:
<style type ="text/css">...
I think the style tag is causing the issue as I don't see anything wrong with your css code.
This seems to cover just about everything with regards to css3 gradients.
You will definitely want to add:
-moz filter
-ms-filter
-ms-
-o-
etc.