I am setting up a new app on GoodBarber and using the html section as I want to be able to more personalize my app. However, I am trying to set a background to a section and it will not display the file that I had uploaded to Google Drive as my background.
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
body {
background-image: url(https://images.app.goo.gl/16UbvTJEEPf8AuNG9);
}
<body>
</body>
</html>
You have two problems. Firstly, you need to include your CSS within your <style> tag.
<style>
body {
background-image: ...
}
</style>
The next issue is that the URL you're using isn't actually an image at all. It's a link to a page with images on it. The actual image URL is https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg. You can find that by right clicking the image on the page and opening the image in a new tab, then copying the URL.
Once you use the right URL, and put your CSS in the right place, it will work fine: https://jsfiddle.net/nx4wc8pd/
Related
I would like to add the image present at this link http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-22-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295826 to my html page. Therefore, I have added the above URL to the "src" attribute in the < img> tag. My HTML code looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img src="http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-26-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295828">
</body>
</html>
However, the image is not displayed when I render the page, and this is what I see.
blank page
What I expect to see instead, is the image at the link correctly displayed on my html page. Any idea what is wrong and how I could fix it?
NOTE: I know I could download the image locally and then add it, but I specifically need to find a solution to add the image from the link, and not from a path on my local computer.
I have a problem with setting up a background image. My html below works perfectly when I use a url to a picture online, however I can't use a picture from my computer. Can I use a picture on my computer as my website's background?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("Downloads/jpic.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<p>first paragraph</p>
</body>
</html>
the problem is with your path you need to specify the path like this if your image is not in the same directory as your project :
'C:\Users\user1\Downloads\jpic.jpg'
try it this way it will work
Yes you may use background-image from your computer. Just put the image(which you want to use) in the same folder in which your coding file is located.
After pasting your image file to the same folder, just use the code below:
background-image: url("jpic.jpg");
Use relative path (without C:\, Documents or whatever) just where the image is from all the other files included in the project. For example if its in the same path it would be:
body {
background-image: url("jpic.jpg");
background-color: #cccccc;
}
And in the images path:
body {
background-image: url("images/jpic.jpg");
background-color: #cccccc;
}
And please avoid inline CSS, import external *.css file
Is it possible to have a common code file in HTML? For instance we are creating some web pages using HTML and need to set a common background. But after it is specified it is too tiresome to change it in every page. It would be quick if they all shared a script to a common file having the code for background color. The following code's location will be shared by all other web pages. So is this possible?
<html>
<style>
body
{
background-image:url("Brown_wall.jpg");
}
</style>
</html>
Create a CSS file with your background image and link it to your html. This will work for every file in the current directory. Anything above or below will need to be modified just a tad.
The link tag is what you're looking for. This article on MDN goes over the specifics of adding stylesheets to your HTML where you would only have to change that one file to see the change reflected in every page that includes it. It also makes your HTML files shorter and less redundant! Here's an example. You'd save these files in the same directory.
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello <span>world</span>!</p>
</body>
</html>
style.css
p span {
color: green;
}
I recently purchased a licence for the program, however anytime I put in a background image into the CSS (also the same with SASS), nothing seems to work.
HTML:
<html>
<head>
<title>Does Sublime Text 2 CSS Work?</title>
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
<body>
<h1>Hello World!</h1>
</body>
</html>
CSS:
body {
background-image:url('/img/background.jpg');
background-size:cover;
}
I assume your path to your image should be:
background-image : url('../img/background.jpg');
This is why your image doesn't show up, you need to get to the root of your folder then enter the "img" folder to get to the image.
Also, if your folder is made like this:
MAINFOLDER:
index.html
css:
stylesheet.css
img:
background.jpg
your path to your stylesheet should be:
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
My guess is the image is not in the right relative path to the style sheet. If your CSS file is in a folder off your web root such as http://example.com/css/site.css, then the browser is going to look for the background image at http://example.com/css/bg-img.jpg ... which would be a pretty odd place to put it.
Try putting the full path to the file in your css...something like this:
body{
background-image: url('/background.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
(And make sure thatbackground.jpg actually lives in /images/, of course!)
I set my DIV as contenteditable = true so I can capture image from clipboard. I managed to paste the image. When I right click and check View Selection Source, I able to see the base64 value. Once i copy and save the base64 value, I managed to see the image I paste earlier. How do I get the View Selection Source value programatically.? Any advice or any link for references is highly appreciated.
HTML
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
Image
Find the img element in your contenteditable element, and grab its src attribute.
Note that this doesn't work with Safari.
You can detect webkit-fake-url pseudo-protocol and branch your code to inform the user that you can't grab their image on their browser.