quick and simple question, I'm trying to add a div with a background-image in *.ejs page file.
<style>
.signPage{
background-image: url("//back.jpg");
width: 98%;
height: 98vh;
top: 1%;
right: 1%;
position: fixed;
border-radius: 20px;
}
the image and the ejs are in the same directory.
thanks
you need to first provide a static path in app.js and then put background image at public/images
to use it just
background-image: url("images/back.jpg");
app.use(express.static(__dirname+'/public'));
You have to provide the path from the css file in which you have
specified the rule. For example: if the image is in folder
public/images and the css file is in folder public/css, then you
should provide like this
-- ../images/image-name.image-extension
In short - You have to provide a path relative to css to image
Related
Heyya,
I've just started writing a website (I'm still pretty new to learning web dev) and I'm having issues with getting a background image to load on a website despite looking around and trying a bunch of different things.
.nav {
width: 100%;
background-image: url("../images/Shadex1.png");
background-repeat : repeat-x;
position : absolute ;
height: 50px;
left : 0;
top : 0;
}
The idea is to get the image to repeat and cover the nav bar and I've tried using both a png and svg files, but I just can't get it to work. I can load the images in the html file and that works fine so I know the file path is correct but CSS just isn't liking it so need a second pair of eyes to take a look.
Thank you for reading and any answers you might come up with.
Try to set width to 100vw and is the uri correct?
Make sure you are able to load the image background-image: url("../images/Shadex1.png"); property. I think there might be chances that url is wrong. if you are getting an image correctly than just see below example.
.nav {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1657037031161-d126c02cce8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
background-repeat: repeat-x;
position: absolute;
height: 100vh; /*I have added extra height for viewing image*/
left: 0;
top: 0;
}
<div class="nav"></div>
Im using carrierwave with my Rails 4 app.
I'm trying to upload videos to my app and then to display them inside container divs I have created, with controls showing.
I have an uploader file called video_uploader.rb with:
storage: file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
In my projects.rb, I have:
mount_uploader :link_to_video_proposal, VideoUploader
In my projects show, I have:
<div class="embed-container1">
<%= video_tag #project.link_to_video_proposal_url :controls =>true %>
</div>
In my projects css file I define embed-container1 as:
.embed-container1 {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 50px;
width: 200px;
overflow: hidden;
//width: 80%;
//padding-left: 5%;
//padding-right:5%;
margin-bottom: 12px;
margin-top:12px;
}
.embed-container1 iframe,
.embed-container1 object,
.embed-container1 embed {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
When I inspect the element in google, there appears to be a further css div around the code. The div is called video. I didn't not define it and it is not in my code. It has a single line of CSS specifying:
video {
object-fit: contain;
}
I don't know if this is what is causing my problem. When I run the page - I get these problems:
The controls do not appear on the video. Does anyone now why not? I specify :controls => true in my show page.
The box size for embed-container1 is 50px by 200px. However,inspecting the video div in google (a div that I did not create or call) specifies size of 1920*1080.
The div size of embed-container1 shows as 200 * 229px in google inspector. I specified 50*200. The video does not fill that box and does not use my CSS.
Does anyone know how to use Carrierwave to upload videos which acknowledge CSS defined in the project? I can't see how to fix this set of errors.
Thank you
You need to set your css to:
.embed-container1 video{}
and start playing with the styles to fit your requirements :)
(tested on Firefox and Chrome)
I'm making a website with HTML5Boilerplate, but every time I use the css background or background-image property, the image doesn't show up.
Folders:
root/css/style.css
root/img_files/logo.png
My css code looks like this:
#logo {
position: absolute;
left: 20px;
top: 10px;
width: 164px;
height: 42px;
background: url(../img_files/logo.png);
background-repeat: none;
}
My stylesheet is properly added to the page:
I can't add a single background image to the objects on the page. HTML5Boilerplate has been installed, so maybe that't the problem, I'm not sure. Do you know why correct CSS and HTML doesn't display the images?
Change
background-repeat: none;
to
background-repeat: no-repeat;
Or just use
background: url(../img_files/logo.png) no-repeat;
I've just come to the same problem and discovered that in case you'll change ID from #logo to anything else (in HTML and CSS of course), then the same code will start to work. Can't say what has been "blocking" #logo to be used, but for now I don't have enough time to discover where the problem is.
Solution for now is to use anything else than #logo, eg. #logoTop or #siteLogo
Hope that helps.
EDIT: It was a selector typo problem which caused browser had ignored that. Weird was it had not happened when selector was changed to some other name than #logo. Please note that #logo:visible typo (instead of visited)
#logo, #logo:link, #logo:visited,
#logo:active, #logo:focus, #logo:hover
{
display: block;
width: 340px;
height: 150px;
background: url(../images/design-elements.png) 0 -300px no-repeat;
}
I had the same problem & found out that if without the width & height property, image will not display.
I'm creating my first Windows 8 app and I have a problem with CSS!
I have a folder images and background texture bg.png inside it. Also, stylesheet is in css folder.
CSS:
#contenthost {
height: 100%;
width: 100%;
background: url("../images/bg.png") repeat;
}
But nothing happen! I tried background: #999 which works. What should I do?
I tried your example with path to the image relative to the app root and it worked without any issues:
#contenthost {
height: 100%;
width: 100%;
background-image: url('/images/logo.png');
background-repeat: repeat;
}
In terms of your code this would be:
#contenthost {
height: 100%;
width: 100%;
background: url('/images/bg.png') repeat;
}
You can also save the image in your project folder.
And load it in the html page like this:
<img id="mainImg2" src="ms-appdata:///Local//bckgrnd.jpg" />
If it is not the path (using absolute vs. relative as above would fix that) you also need to make sure you have an element with an id = contenthost.
CSS let's you do both id and classes so if you start getting into styling page controls you will see a heavy use of classes like (.mypage .subsection).
Finally, you can always set the background in any individual html file directly on the body tag like:
<body style="background-image: url('/images/bg.png');">
I tried to use a svg for a background and it works in local but not when I upload it to an ftp.
It has a png fallback for IE and others that not support svg. But in all cases I just see the png.
(Just for the example use a red square for the svg and a very different think a logo of skype.png for the fall back):
http://jsfiddle.net/snG8w/
http://codepen.io/pen/9135/2
How to put a svg in in this background?
HTML:
<div id="quadrat"></div>
CSS:
#quadrat {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 400px;
line-height:200px;
background-image: url('http://mig-marketing.com/proves/retina/skype.png');
background-image: none,url('http://mig-marketing.com/proves/retina/rectangle.svg'), url('http://mig-marketing.com/proves/retina/skype.png');
background-size: 100% 100%;
background-repeat:no-repeat;
}
You are serving the svg image with a 'text/xml' mediatype. While that's technically fine, it's quite possible that browsers disallow that in scenarios like this one, where only images are allowed. Try configuring your server to send the official svg mediatype 'image/svg+xml' instead, that should work.
Some more details for how to configure your webserver can be found e.g here.
Update: added link to the svg image that gets served with 'text/xml'.