What's the best way to determine the background image on this website? I'm in the process of replicating a site on

I have been asked to clone the website in order to create a Wordpress site. The original site is currently on Kajabi platform. I managed to download all images from the Kajabi site by right-clicking and selecting download. However, there are certain images (indicated with arrows) that did not download but display correctly in the custom Wordpress theme.

All images, except for those in the CTA (Call-to-Action) section such as the one with the gentleman's arms outstretched, have been successfully downloaded.

The client is transitioning from Kajabi to Wordpress. My concern is that the cloned Wordpress theme might be sourcing these particular images from the Kajabi site. In case the Kajabi site goes down, there could be an issue retrieving these images. As of now, the Wordpress theme is functioning well and displaying these images.

To investigate how these CTA images are loaded onto the site, I used Google Chrome Inspect Elements tool, but I am still confused about it.

I am seeking guidance on how to determine the source of these CTA images so that I can download them and link them properly in the Wordpress theme's HTML code. If someone can help me identify one image, I believe I will be able to figure out the rest. Thank you for your assistance.

Answer №1

When you inspect the HTML code, look for a style block to expand and access the URL of the background image. I've highlighted it in the images provided. They have included a style block before the parent div of any container with a background image. Simply expand that style tag to retrieve the image.

Image-1:

Image-2:

Image-3:

Answer №2

If you're able to drag the image directly to your desktop when clicking on it, then it is likely being used by the <img src=""> tag in the code. It could also be utilized through CSS.

To confirm where the image is being used, review the CSS file for "background-image:url()" or inspect the element section by section.

Answer №3

If you are a Google Chrome user, there's a fantastic extension you can add to enhance your browsing experience.

I'm a Gentleman

Take a look at the features offered by this extension:

You can easily save images with just one click, through gestures, or by using the extension button.

Save images instantly by pressing alt + click (hold the alt key and click on the image).
Alternatively, drag images slightly in any direction to save them.
Download all images on the page by clicking on the extension button (green button located on the top right).

Note: The downloaded images will be saved in the default directory for Chrome downloads.

Installation Tip: After installing the extension, it won't automatically affect tabs that were already open. You'll need to refresh those tabs for the extension to work on them.

You can also use inspect element to explore the webpage further. Here's how you can access it:

Right-click anywhere on the webpage and select "Inspect" from the menu that appears at the bottom.
Click on the hamburger menu (the three stacked dots icon) on the far right of your Chrome toolbar, then go to More Tools and choose Developer Tools.

To locate specific images, simply press CTRL+F and type in the desired file extension like .png or .jpg.

Here is an example:

https://i.sstatic.net/pM6PU.jpg

Answer №4

To save the image, simply right-click on it and select "Save Image As." Once you choose a location to save the file, check the file type in the file name.

Answer №5

Tackling certain websites can be a frustrating challenge when trying to save an image. I distinctly recall my own struggles in attempting to secure a background theme image from the original version of Gmail.

If you ever find yourself facing this difficulty, don't lose hope. Simply utilize the Developer Tools feature, navigate to the Network section, apply the Images filter, and then arrange the images by size in descending order. This way, the largest image will appear first, making it easier for you to pinpoint your desired image.

Remember to prioritize sorting by file size, as the hefty background images typically take up the most space.

Answer №6

Just took a look at your website...

Image 1 You can find this below the section id 1574286919067

Image 2 Similar to the first image, this is under section 1589827030126

Image 3 Once again, under section 1589828889742

I hope this information is helpful for you. Feel free to reach out if you have any further questions.

The direct links to the images:

-> Image 1:

-> Image 2:

-> Image 3:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the div element below the navigation bar

I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...

css sails.js

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

Utilizing DevExtreme widgets for the creation of a line chart in jQuery as shown below: var dataSource = [{"Date Range": "August-2018", Benelux: 194, Czech_Slovakia: 128, ...

javascript jquery css charts devextreme

Using TypeScript, you can replace multiple values within a string

Question : var str = "I have a <animal>, a <flower>, and a <car>."; In the above string, I want to replace the placeholders with Tiger, Rose, and BMW. <animal> , <flower> and <car> Please advise on the best approach ...

javascript html angular typescript angular5

Create a focal point by placing an image in the center of a frame

How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled? Ensure the image is both inscribed and centered Set dimensions and position usin ...

javascript html css

Fixed navbar at the top changes from absolute positioning to relative when scrolling

My goal is to dynamically change the position of the navbar from fixed to absolute as the user scrolls past 600px. Initially, I used the following code: if (scroll >= 700) { $(".navbar-fixed-top").addClass("navbar-scroll"); } else { $(".navbar ...

jquery css navbar

Devices are not displaying media queries as expected

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) { div.body, div.body div.links, div.body div.links div, div.footer, div.footer div { display: block ...

css media-queries media

Ensure that the div is aligned properly with the div above

I've been struggling with the alignment of divs on my website for the past day. Any tips on how to properly align the image (the text image) inside a div? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 ...

css html

Placing divs in rows and columns at specific breakpoints

I have a footer with two divs that I need to be centered and side by side. When the screen size reaches 960px, I want the second div to move below the first one while still staying centered. Does anyone know how to achieve this? Below is my code snippet: ...

html css flexbox

Forward based on user and current page within functions.php

I am seeking a code snippet to implement on my WordPress site that will redirect specific users based on their role only when they reach a particular page. This redirection should display a unique page for a certain user role, distinct from what other use ...

php wordpress function http-redirect

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

css next.js css-modules

What is the method for obtaining the CSS text content from an external stylesheet?

I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...

javascript css

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

html css

What is the best way to remove a logo from a wordpress website?

I've come across a theme that I find quite appealing, but the "designed by" logo is positioned in a rather bothersome place - right in the center of the page on the left side. Is there a way for me to remove it from there and relocate it to the footer ...

php html wordpress

Font imported via SCSS mysteriously vanishing

I'm currently working on a website using this amazing template, but I'm struggling to import a Google Font. In my SCSS file (styles.css), I've added the following: @import 'https://fonts.googleapis.com/css2?family=Nunito&display=sw ...

css sass postcss eleventy

Properly extending the functionality of an HTML widget

Understanding HTML and CSS layout is still a mystery to me, so any guidance on what I'm trying to achieve would be greatly appreciated. I am currently developing a JavaScript API for our company's "widget" so that users can integrate it into the ...

html css css-float

Having trouble making a background image stay fixed to the window with Bootstrap 3

Having trouble getting a full background image in Bootstrap 3? The image is cropping below and not displaying properly on all devices. Can anyone help me out? I've been trying to fix this for quite some time. background-repeat: no-repeat; min- ...

css background-image

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Hey all, I recently started my journey into web development and I'm working on a feature to display "Last Refreshed ago" on the webpage. I came across this website which inspired me. What I aim to achieve is to show text like "Last Refreshed 1 sec ago ...

javascript html express npm-package

CSSer Q&A