I'm trying to use the document.write options for a website to set the recurring header that appears on every other site.
Unfortunately I'm stuck with an error cause I cant set the background-image, because it gives me an parsing error.
document.write('<div style="background-image: url('images/index/1ApBer2016.JPG'); background-repeat: no-repeat; background-size: cover;" class="header">\<h1>XXX<br> XXX</h1>\
</div>\'
);
I'm thinking it's because of the quotation marks for the image itself, but I can't seem to fix it.
Do you guys have any help?
Escape the quotes as in the code below, using the escape character "\"
document.write('<div style="background-image: url(\'images/index/1ApBer2016.JPG\'); background-repeat: no-repeat; background-size: cover;" class="header"><h1>XXX<br> XXX</h1></div>');
Use ES6 back-tics `. You no longer to espace any character and code looks clean and readable as well.
document.write(`<div style="background-image: url('https://picsum.photos/200/300'); background-repeat: no-repeat; background-size: cover;" class="header"><h1>XXX<br> XXX</h1>
</div>`);
DEMO:
document.write(`<div style="background-image: url('https://picsum.photos/200/300'); background-repeat: no-repeat; background-size: cover;" class="header"><h1>XXX<br> XXX</h1>
</div>`);
Related
I have a site that I used chrome developer tools to get working. However, when checking the site in Firefox, the background image is only viewable in a small strip in the middle of the page.
the code for my background image is the following:
body {
background-image: url(../assets/headerbackground.jpg);
min-height: 0px;
-webkit-background-size: 100vmax;
-moz-background-size: 100vmax;
-o-background-size: 100vmax;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
}
Any help would be appreciated. Not sure how to troubleshoot this.
UPDATE:
Found the solution to my problem: My <body> had elements that were making it sandwich between the header and footer. Removing those elements from <body> did the trick.
You should be able to shave off the vendor prefixes, contain and cover have been well adopted for some time now.
https://caniuse.com/?search=background-size
body {
background-image: url('../assets/headerbackground.jpg');
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
In addition to this, as a rule of thumb, I would remove the styling from the body tag and wrap the content of your site in something like <div id="app"> ... </div>. The <html> and <body> tags are rendered differently in each browser more than likely this is what is causing your site to display differently in separate browsers.
RMZ
I'm using jQuery load function to replace iframe basically, since it loads only the section better.
It's working fine but the image is having problem since the directory of the image is placed inside about.php page, and i'm trying reaching it from folder/editor.php.
About.php directory - images/img.jpg
Editor.php directory - ../images/img.jpg
Editor.php - Notice I have tried to use different directory on this page.
<style>
.content-page .hero {
height: 250px;
background-image: url("../images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<div id="iframe"></div>
<script>
$('#iframe').load('../about.php #content');
</script>
About.php
<div id="content">
<style>
.content-page .hero {
height: 250px;
background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<!-- Content goes here -->
</div>
How can I change css image source attribute after load function goes into action?
You actually did two questions: how to change the style, and how to do it after $.load executed. About the first one, there are several ways. About the second, you could use the callback argument, the third $.load argument.
From the code you posted it seems you actually don't want to change the background image, it seems you want to keep the same, simply you have some problems due to the directories.
The cleanest solution would be to write a .css file and include it in both the pages rather than to spread <style> elements in your pages with identical content.
Another solution could be to use absolute paths rather than relative paths: /images/header-background.jpg (if your image directory is in the root of your web server) rather than images/header-background.jpg or ../images/header-background.jpg.
If you strictly need to keep this architecture changing your About.php as follows could be another possible solution.
<style>
.content-page .hero {
height: 250px;
background-image: url("images/header-background.jpg");/*url("/images/headers/header-background.jpg");*/
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
<div id="content">
<!-- Content goes here -->
</div>
i have problem puting div in the image. The thing is that I want to make div as downloadable (right click, download as image OR on button). This is my div which i want to be "downloadable"
<div style="display: block; background-color: transparent; background-repeat: no-repeat; background-image: url("images/fujairah-plates.png"); background-size: contain; min-height: 90px;" class="" id="plate">
<div id="plate2"></div>
<div class="letter-left draw_code" id="draw_code"> B</div>
<div class="letter-right draw_num" id="draw_num"> </div></div>
I hope for some constructive suggestions.
You can use HTML2Canvas JS library to convert the HTML into a canvas and after that, you can export the canvas to data URI using the toDataURI() JavaScript function. That data URI string can be then presented as a downloadable image.
P. S: I've tried it and it works perfectly. ☺
I'm having a lot of trouble figuring out how to get one of my views in Angular to display with a specific background. I'm finding that, with the code below, the entire view that I'm trying to style disappears.
All relevant code is below:
HTML (index.html):
<div class="col-md-8 col-md-offset-2">
<div ng-view></div>
</div>
Angular view:
<div class="main-body">
<div ng-switch="xxCtrl.xxx">
</div>
</div>
CSS:
body {
margin-top: 50px;
background: url('../img/main-bg.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
font-size: 16px;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
.main-body {
background-color: rgba(16, 16, 16, 0.6);
height: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: scroll; overflow-x:hidden;
z-index: -1000000;
}
I have tried moving the main-body class into the ng-switch, in the ng-switch itself, etc. I even tried setting in-line CSS using ng-style, but I couldn't get the height set to 100%, regardless of how I formatted it. The only time I've been able to get the background to display as I wished was when I set the wrapper div outside of ng-view in index.html to main-body. However, I really don't want the background I'm creating to display across all views - just the one.
I have a feeling this is likely a CSS-related issue, not an Angular one. If anyone can point me in the right direction here, it would be greatly appreciated! Thank you!
Was able to solve this problem by changing the height to 100vh instead of 100%.
I am working on a Homepage right now, and got a few Problems.
I got a Background-Image set to Cover in the Body:
body{
opacity: 1;
transition:opacity 0.5s ease-out;
background-image: url(Background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now I want that to change the opacity of the whole body-tag to 0 with javascript.
$("body").css("opacity", "0");
Everything disappears except the background-image, although it's in the body-tag?
Any Ideas?
UPDATE!!
I uploaded the "problem-site" to a webspace.
Website
Just click on "Query" than click in any box and press ENTER to call the js-function.
Thanks!!
I've made a fiddle with your code that reproduces the issue. Code can be simplified into this:
body{
opacity: 0.1;
background-color: red;
}
The root issue is that fiddling with the opacity of the <body> element doesn't have any effect unless you have something below. A simple fix is to add this:
html{
background-color: white;
}
Updated fiddle
For whatever reason (I can't seem to find any references to why), setting opacity:0 or visibility:hidden on the <body> tag has no effect on the background-image. It definitely has an effect an element with a background-image that is a child of the body tag. So you have two options:
Add a wrapper <div> around the <body> content:
Where you currently have:
<body>
<!-- Content -->
</body>
Change this to:
<body>
<div id="wrapper">
<!-- Content -->
</div>
</body>
And move the CSS on body to #wrapper as well any Javascript/jQuery targeting body
Set the opacity on the HTML element
Wherever you are setting opacity:0, do it on the <html> element instead.
Personally, I'd recommend the first option.